Essentials
Marking
Mark dates and ranges, and show week numbers.
Bound value
<FunctionalCalendar
v-model="value"
is-date-picker
show-week-numbers
:marked-dates="['6/10/2026', '21/10/2026']"
:marked-date-range="{ start: '12/10/2026', end: '16/10/2026' }"
/>
Marked dates
markedDates takes dates in dateFormat. To add your own class to a day, pass objects instead of strings.
<FunctionalCalendar
:marked-dates="[
{ date: '5/10/2026', class: 'holiday' },
{ date: '12/10/2026', class: 'birthday' },
]"
/>
The class lands on the day cell, next to the vfc-* classes. The examples show it live.
Marked ranges
markedDateRange takes { start, end }. Set one side to false to mark everything after the start or before the end. Pass an array of { start, end } to mark several spans.
<FunctionalCalendar :marked-date-range="{ start: '12/10/2026', end: false }" />
<FunctionalCalendar :marked-date-range="[{ start: '1/10/2026', end: '3/10/2026' }, { start: '9/10/2026', end: '12/10/2026' }]" />
Week numbers
showWeekNumbers adds a column. Each number is the ISO week of that row's Thursday, counted from the first day of the week the calendar uses. borderColor sets the color of the column border.
Today
Today gets the vfc-today class and a small marker in the --vfc-today color.