Prop | Default | Type |
---|---|---|
as | 'div' | AsTag | Component The element or component this component should render as. Can be overwritten by |
asChild | boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details. | |
calendarLabel | string The accessible label for the calendar | |
defaultPlaceholder | DateValue The default placeholder date | |
defaultValue | DateValue The default value for the calendar | |
dir | 'ltr' | 'rtl' The reading direction of the calendar when applicable. | |
disabled | false | boolean Whether the calendar is disabled |
disableDaysOutsideCurrentView | false | boolean Whether or not to disable days outside the current view. |
fixedWeeks | false | boolean Whether or not to always display 6 weeks in the calendar |
initialFocus | false | boolean If 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 | Matcher A function that returns whether or not a date is disabled | |
isDateUnavailable | Matcher A function that returns whether or not a date is unavailable | |
locale | string The locale to use for formatting dates | |
maxValue | DateValue The maximum date that can be selected | |
minValue | DateValue The minimum date that can be selected | |
modelValue | DateValue | DateValue[] The controlled checked state of the calendar | |
multiple | false | boolean Whether 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 | number The number of months to display at once |
pagedNavigation | false | boolean This property causes the previous and next buttons to navigate by the number of months displayed at once, rather than one month |
placeholder | DateValue The placeholder date, which is used to determine what month to display when no date is selected | |
preventDeselect | false | boolean Whether 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 | boolean Whether 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 | 6 The 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 | DateValue The 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 | 6 The start of the week |
locale | string The calendar locale |
fixedWeeks | boolean Whether or not to always display 6 weeks in the calendar |
modelValue | DateValue | DateValue[] | undefined The current date of the calendar |
Methods | Type |
---|---|
isDateDisabled | Matcher A function that returns whether or not a date is disabled |
isDateUnavailable | Matcher A function that returns whether or not a date is unavailable |