Calendar
Date selection grid (alpha)
Parts: CalendarRoot, CalendarHeader, CalendarHeading, CalendarGrid, CalendarGridHead, CalendarGridBody, CalendarGridRow, CalendarCell, CalendarCellTrigger, CalendarHeadCell, CalendarNext, CalendarPrev
CalendarRoot
Props
| Prop | Type | Default | ||||||
|---|---|---|---|---|---|---|---|---|
as | `AsTag \ | Component` | "div" | |||||
asChild | boolean | - | ||||||
calendarLabel | string | - | ||||||
defaultPlaceholder | DateValue | - | ||||||
defaultValue | DateValue | - | ||||||
dir | `"ltr" \ | "rtl"` | - | |||||
disabled | boolean | false | ||||||
fixedWeeks | boolean | false | ||||||
initialFocus | boolean | false | ||||||
isDateDisabled | Matcher | - | ||||||
isDateUnavailable | Matcher | - | ||||||
locale | string | "en" | ||||||
maxValue | DateValue | - | ||||||
minValue | DateValue | - | ||||||
modelValue | `DateValue \ | DateValue[]` | - | |||||
multiple | boolean | false | ||||||
nextPage | ((placeholder: DateValue) => DateValue) | - | ||||||
numberOfMonths | number | 1 | ||||||
pagedNavigation | boolean | false | ||||||
placeholder | DateValue | - | ||||||
preventDeselect | boolean | false | ||||||
prevPage | ((placeholder: DateValue) => DateValue) | - | ||||||
readonly | boolean | false | ||||||
weekdayFormat | `"narrow" \ | "short" \ | "long"` | "narrow" | ||||
weekStartsOn | `0 \ | 1 \ | 2 \ | 3 \ | 4 \ | 5 \ | 6` | 0 |
Emits
| Event | Payload |
|---|---|
update:modelValue | [date: DateValue] |
update:placeholder | [date: DateValue] |
Slots
| Slot | Type | ||||||
|---|---|---|---|---|---|---|---|
date | DateValue | ||||||
grid | Grid<DateValue>[] | ||||||
weekDays | string[] | ||||||
weekStartsOn | `0 \ | 1 \ | 2 \ | 3 \ | 4 \ | 5 \ | 6` |
locale | string | ||||||
fixedWeeks | boolean |
CalendarHeader
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "div" |
asChild | boolean | - |
CalendarHeading
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "div" |
asChild | boolean | - |
Slots
| Slot | Type |
|---|---|
headingValue | string |
CalendarGrid
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "table" |
asChild | boolean | - |
CalendarGridHead
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "thead" |
asChild | boolean | - |
CalendarGridBody
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "tbody" |
asChild | boolean | - |
CalendarGridRow
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "tr" |
asChild | boolean | - |
CalendarCell
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "td" |
asChild | boolean | - | |
date* | DateValue | - |
CalendarCellTrigger
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "div" |
asChild | boolean | - | |
day* | DateValue | - | |
month* | DateValue | - |
Slots
| Slot | Type |
|---|---|
dayValue | string |
CalendarHeadCell
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "th" |
asChild | boolean | - |
CalendarNext
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "button" |
asChild | boolean | - | |
nextPage | ((placeholder: DateValue) => DateValue) | - | |
step | `"month" \ | "year"` | "month" |
CalendarPrev
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "button" |
asChild | boolean | - | |
prevPage | ((placeholder: DateValue) => DateValue) | - | |
step | `"month" \ | "year"` | "month" |