Limits and availability
<FunctionalCalendar
v-model="value"
is-date-picker
:limits="{ min: '8/10/2026', max: '24/10/2026' }"
:disabled-day-names="['We']"
:disabled-dates="['16/10/2026']"
/>
Dates use dateFormat, dd/mm/yyyy by default. 5/3/2026 and 05/03/2026 mean the same date.
| Prop | Use |
|---|---|
limits | { min, max }. Days outside are disabled and the arrows stop at the edge months. |
disabledDates | A list of dates, plus the keywords beforeToday and afterToday. |
enabledDates | If it has entries, only those dates (and keywords) can be picked. |
disabledDayNames | Weekday names to disable. They must match dayNames, Mo to Su by default. |
minSelDays, maxSelDays | Bounds for the length of a range. |
Names and locales
With a locale, disabledDayNames still matches the English two letter names Mo to Su, as well as the localized ones.
Reactive list
markedDates, markedDateRange, disabledDates, enabledDates, disabledDayNames, limits and calendarsCount are watched, in configs too. Swap a list or the limits to change what is available on a calendar that is on screen. Changing limits or calendarsCount rebuilds the grids from the current month. With isSeparately, each grid keeps the month you moved it to, a grid outside the new limits moves to the nearest allowed month, and new grids follow the last one. A new object with the same content changes nothing.
Disabled days and keyboard
A disabled day has aria-disabled="true" and stays reachable with the arrow keys. Pressing Enter on it does not select it.
Presets
A preset is disabled when its range breaks one of these rules.