Examples
Limits and availability
Block dates, weekdays and spans, or allow only a list of dates.
Dates use the dateFormat of the calendar, dd/mm/yyyy by default. Day and month may carry a leading zero.
Limit to a span
limits takes a min and a max. Days outside are disabled, and the arrows stop at the edge months.
Bound value
<FunctionalCalendar
v-model="value"
is-date-picker
:new-current-date="new Date(2026, 9, 1)"
:limits="{ min: '8/10/2026', max: '24/10/2026' }"
/>
Minimum and maximum range length
minSelDays and maxSelDays bound the length of a range. A range that is too short is stretched to the minimum, and one that is too long is cut at the maximum.
Bound value
<FunctionalCalendar v-model="value" is-date-range :min-sel-days="3" :max-sel-days="6" />
Disable weekdays
disabledDayNames takes the names from dayNames, Mo to Su by default.
Bound value
<FunctionalCalendar v-model="value" is-date-picker :disabled-day-names="['Sa', 'Su']" />
Disable dates
disabledDates takes dates and two keywords, beforeToday and afterToday.
Bound value
<FunctionalCalendar
v-model="value"
is-date-picker
:disabled-dates="['beforeToday', '30/10/2026']"
/>
Allow only some dates
enabledDates is the one prop the calendar watches, so you can change the list while it is on screen.
Bound value
<FunctionalCalendar v-model="value" is-date-picker :enabled-dates="enabledDates" />