Calendar Props

Name	Type	Default	Description
modelValue	Date | null	null	The selected date.
mode	'single' | 'range'	'single'	Select one day, or a start and end.
range	{ start: Date | null, end: Date | null } | null	null	Range value. Bind with v-model:range.
numberOfMonths	1 | 2	1	How many months to show side by side.
focusDate	Date	—	Month to show first.
min	Date	—	Earliest selectable date.
max	Date	—	Latest selectable date.
isDateDisabled	(date: Date) => boolean	—	Return true to disable a date.
dateConstraints	Array<(date: Date) => boolean>	—	A day is disabled when any function returns false. This applies together with the earliest date, the latest date, and the disable predicate.
minRangeSpan	number	1	Shortest range length, counting both ends. Above 1, clicking the start again cancels the selection.
maxRangeSpan	number	—	Longest range length, counting both ends. It applies only after a start is picked.
hasOutsideDays	boolean	true	Show days from the neighboring months. Those days cannot be selected.
hasWeekNumbers	boolean	false	Show the week number at the start of each row.
hasVariableRowCount	boolean	false	Shrink the grid to the weeks the month needs. Otherwise the grid stays six rows tall.
weekStartsOn	0-6 | 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'	0	First day of the week. 0 is Sunday.
handleRef	Ref | (handle) => void	—	Receives a handle. navigateTo moves the month to that day and focuses it.
label	string	Calendar / 日历	Accessible name for the calendar. English by default; Chinese when zh-CN is provided.
disabled	boolean	false	Disables the whole calendar.

Calendar events

Name	Payload	Description
update:modelValue	value: Date | null	Emitted when the selected date changes.
update:range	value: { start: Date | null, end: Date | null }	Emitted when the range changes.
change	value: Date | null	Emitted when the selected date changes.
update:focusDate	value: Date	Emitted when the visible month changes. The value is the first day of that month.

Calendar slots

Name	Props	Description
header	—	Custom month header.
day	{ date, isSelected, isDisabled, isToday, isInMonth }	Custom day cell.