I'm using the date-picker of vCalendar for Vue 3 and trying to highlight the current day in the date-picker popover by default.
Using the following code to create a date-picker works and gives the desired result:
<v-date-picker
mode="date"
v-model="selectedDate"
:update-on-input="false"
:popover="{ visibility: 'focus' }"
:model-config="{ type: 'string', mask: 'YYYY-MM-DD' }"
:attributes="[{
key: 'today',
content: {
color: 'red',
},
dates: [
new Date(),
],
order: 0
}]"
>
<template #default="{ togglePopover }">
<button>
<b v-if="selectedDate">
{{ formatDate(selectedDate) }}
</b>
<i v-else>
select a date...
</i>
</button>
</template>
</v-date-picker>
Now I would like to add the attributes option globally to all <v-date-picker />.
I tried to add the attributes to the setup options but this does not work:
import { setupCalendar, Calendar, DatePicker } from 'v-calendar';
import 'v-calendar/style.css';
app.use(setupCalendar, {
datePicker: {
attributes: [{
key: 'today',
content: {
color: 'red',
},
dates: [
new Date(),
],
order: 0
}],
}
});
app.component('v-calendar', Calendar);
app.component('v-date-picker', DatePicker);
Any suggestions?