| Prop | Default | Type |
|---|---|---|
as | 'div' | AsTag | ComponentThe element or component this component should render as. Can be overwritten by |
asChild | booleanChange the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details. | |
calendarLabel | stringThe accessible label for the calendar | |
defaultPlaceholder | DateValueThe default placeholder date | |
defaultValue | DateValueThe default value for the calendar | |
dir | 'ltr' | 'rtl'The reading direction of the calendar when applicable. | |
disabled | false | booleanWhether the calendar is disabled |
disableDaysOutsideCurrentView | false | booleanWhether or not to disable days outside the current view. |
fixedWeeks | false | booleanWhether or not to always display 6 weeks in the calendar |
initialFocus | false | booleanIf true, the calendar will focus the selected day, today, or the first day of the month depending on what is visible when the calendar is mounted |
isDateDisabled | MatcherA function that returns whether or not a date is disabled | |
isDateUnavailable | MatcherA function that returns whether or not a date is unavailable | |
locale | stringThe locale to use for formatting dates | |
maxValue | DateValueThe maximum date that can be selected | |
minValue | DateValueThe minimum date that can be selected | |
modelValue | DateValue | DateValue[]The controlled checked state of the calendar | |
multiple | false | booleanWhether multiple dates can be selected |
nextPage | ((placeholder: DateValue) => DateValue)A function that returns the next page of the calendar. It receives the current placeholder as an argument inside the component. | |
numberOfMonths | 1 | numberThe number of months to display at once |
pagedNavigation | false | booleanThis property causes the previous and next buttons to navigate by the number of months displayed at once, rather than one month |
placeholder | DateValueThe placeholder date, which is used to determine what month to display when no date is selected | |
preventDeselect | false | booleanWhether or not to prevent the user from deselecting a date without selecting another date first |
prevPage | ((placeholder: DateValue) => DateValue)A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component. | |
readonly | false | booleanWhether the calendar is readonly |
weekdayFormat | 'narrow' | 'narrow' | 'short' | 'long'The format to use for the weekday strings provided via the weekdays slot prop |
weekStartsOn | 0 | 0 | 1 | 2 | 3 | 4 | 5 | 6The day of the week to start the calendar on |
| Emit | Payload |
|---|---|
update:modelValue | [date: DateValue]Event handler called whenever the model value changes |
update:placeholder | [date: DateValue]Event handler called whenever the placeholder value changes |
| Slots (default) | Payload |
|---|---|
date | DateValueThe current date of the placeholder |
grid | Grid<DateValue>[]The grid of dates |
weekDays | string[]The days of the week |
weekStartsOn | 0 | 1 | 2 | 3 | 4 | 5 | 6The start of the week |
locale | stringThe calendar locale |
fixedWeeks | booleanWhether or not to always display 6 weeks in the calendar |
modelValue | DateValue | DateValue[] | undefinedThe current date of the calendar |
| Methods | Type |
|---|---|
isDateDisabled | MatcherA function that returns whether or not a date is disabled |
isDateUnavailable | MatcherA function that returns whether or not a date is unavailable |
