vCalendar: define default attributes for date-picker

72 Views Asked by At

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?

0

There are 0 best solutions below