Reka | Reka UI

Prop	Default	Type
`allowNonContiguousRanges`	`false`	`boolean` When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`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`	`{ start: undefined, end: undefined }`	`DateRange` The default value for the calendar
`dir`		`'ltr' \| 'rtl'` The reading direction of the calendar when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`disabled`	`false`	`boolean` Whether or not the calendar is disabled
`disableDaysOutsideCurrentView`	`false`	`boolean` Whether or not to disable days outside the current view.
`fixedDate`		`'start' \| 'end'` Which part of the range should be fixed
`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
`isDateHighlightable`		`Matcher` A function that returns whether or not a date is hightable
`isDateUnavailable`		`Matcher` A function that returns whether or not a date is unavailable
`locale`		`string` The locale to use for formatting dates
`maximumDays`		`number` The maximum number of days that can be selected in a range
`maxValue`		`DateValue` The maximum date that can be selected
`minValue`		`DateValue` The minimum date that can be selected
`modelValue`		`DateRange \| null` The controlled checked state of the calendar. Can be bound as `v-model`.
`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. This updates as the user navigates the calendar and can be used to programmatically control the calendar view
`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 or not 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: DateRange]` Event handler called whenever the model value changes
`update:placeholder`	`[date: DateValue]` Event handler called whenever the placeholder value changes
`update:startValue`	`[date: DateValue]` Event handler called whenever the start value changes
`update:validModelValue`	`[date: DateRange]` Event handler called whenever there is a new validModel

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`	`DateRange` The current date range

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
`isDateHighlightable`	`Matcher` A function that returns whether or not a date is hightable