Calendar
An enhanced calendar with a custom month/year selector. Click on the month to access the month/year picker view.
Import
Usage
Single Date
Date Range
Multiple Dates
Disabled Dates
Date Constraints
Week Numbers
Data Attributes
- -
data-slot="calendar"Main calendar element identifier - -
data-slot="month-year-picker"Month/year picker view identifier
Accessibility
Keyboard Support
- -
Arrow KeysNavigate between days - -
Page UpGo to previous month - -
Page DownGo to next month - -
HomeGo to start of week - -
EndGo to end of week - -
Enter / SpaceSelect the focused date - -
TabMove focus to next focusable element
ARIA Attributes
- -
role='grid'Applied to the calendar table for proper grid navigation - -
aria-labelDescribes the calendar purpose for screen readers - -
aria-selectedIndicates the selected date(s) - -
aria-disabledSet on disabled dates
Calendar Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| mode | 'single' | 'multiple' | 'range' | 'single' | Selection mode for the calendar. |
| selected | Date | Date[] | DateRange | undefined | - | The selected date(s). |
| onSelect | (date: Date | Date[] | DateRange | undefined) => void | - | Callback when date selection changes. |
| showOutsideDays | boolean | true | Whether to show days from adjacent months. |
| showWeekNumber | boolean | false | Whether to show week numbers. |
| disabled | Matcher | Matcher[] | - | Dates that should be disabled. Can be a Date, array of Dates, { dayOfWeek: number[] }, { before: Date }, { after: Date }, or a function (date) => boolean. |
| startMonth | Date | - | The earliest month the user can navigate to. |
| endMonth | Date | - | The latest month the user can navigate to. |
| month | Date | - | Control the displayed month (controlled mode). |
| onMonthChange | (date: Date) => void | - | Callback when the displayed month changes. |
| buttonVariant | 'default' | 'bordered' | 'light' | 'ghost' | 'ethereal' | 'ghost' | Variant for the navigation buttons. |
| numberOfMonths | number | 1 | Number of months to display at once. |
