Calendar

Overview

A full-featured calendar component built on CalendarRoot with optional month/year navigation dropdowns. Supports single and multiple date selection, date range constraints, and configurable heading layouts.

Theme entry: Calendar

Props

Name	Type	Required	Default	Description
iconOverride	Object		null	A partial icon registry ({ [componentName]: { [iconName]: { component, props } } }) merged with inherited and default icon entries; scopes icon overrides to this component and its descendants.
themeOverride	String|Object|Array		null	A partial theme object merged with the component's default theme; accepts a class string, class array, or theme object.
class	string|array|object		undefined	Additional CSS classes to apply to the calendar root.
layout	string		undefined	The heading layout style: "month-and-year", "month-only", "year-only", or default heading.
modelValue	object		undefined	The currently selected date value (use with v-model).
defaultPlaceholder	object		undefined	The default placeholder date shown when no date is selected.
placeholder	object		undefined	The current placeholder date (use with v-model:placeholder).
locale	string		undefined	The locale string used for date formatting.
minValue	object		undefined	The minimum selectable date value.
maxValue	object		undefined	The maximum selectable date value.
yearRange	array		undefined	An explicit array of year date values to populate the year dropdown.
fixedWeeks	boolean		undefined	Whether to always display a fixed number of weeks.
isDateDisabled	func		undefined	A function that returns true for dates that should be disabled.
isDateUnavailable	func		undefined	A function that returns true for dates that are unavailable.
numberOfMonths	number		undefined	The number of months to display at once.
pagedNavigation	boolean		undefined	Whether to use paged navigation (advance by numberOfMonths at a time).
preventDeselect	boolean		undefined	Whether to prevent deselecting an already-selected date.
weekStartsOn	number		undefined	The day of the week the calendar starts on (0 = Sunday).
weekdayFormat	string		undefined	The format of weekday labels: "narrow", "short", or "long".
calendarLabel	string		undefined	An accessible label for the calendar.
disabled	boolean		undefined	Whether the calendar is disabled.
readonly	boolean		undefined	Whether the calendar is read-only.
initialFocus	boolean		undefined	Whether to focus the calendar on mount.
multiple	boolean		undefined	Whether multiple dates can be selected.

Slots

calendar-heading

Scoped slot.

Bindings

Name	Description
date
month
year

Events

Name	Description
update:modelValue	Emitted when the value changes.
update:placeholder	Emitted when the placeholder date changes.

Full event reference

Source

client/lib/controls/calendar/Calendar.vue