Calendar
The Calendar component is a date picker that supports single date and range selection, with keyboard navigation and accessibility features. It's built on top of the Input component and includes month navigation, week numbers, and customizable formatting.
Examples
Basic Usage
May 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
<Calendar label="Select Date" />Date Range Selection
May 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
<Calendar
label="Date Range"
range={true}
value={[new Date('2025-04-07'), new Date('2025-04-14')]}
/>With Min/Max Dates
May 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
<Calendar
label="Date"
minDate={new Date('2025-04-01')}
maxDate={new Date('2025-04-30')}
/>With Week Numbers
May 2026
| Wk | Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|---|
| 18 | |||||||
| 19 | |||||||
| 20 | |||||||
| 21 | |||||||
| 22 |
<Calendar
label="Date"
showWeekNumbers={true}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | Date | [Date, Date] | null | null | Selected date or date range |
range | boolean | false | Whether to allow range selection |
minDate | Date | null | null | Minimum selectable date |
maxDate | Date | null | null | Maximum selectable date |
showWeekNumbers | boolean | false | Whether to show week numbers |
dayNames | string[] | ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] | Custom day names |
monthNames | string[] | ['January', 'February', ...] | Custom month names |
label | string | 'Date' | Input label |
format | string | 'MM/dd/yyyy' | Date format for display |
disabled | boolean | false | Whether the calendar is disabled |
class | string | '' | Additional CSS classes |
Events
| Event | Detail Type | Description |
|---|---|---|
onselect | { date: Date } | { start: Date, end: Date } | Fired when a date or range is selected |
Keyboard Navigation
The Calendar component supports keyboard navigation when the calendar is open:
ArrowLeft- Previous dayArrowRight- Next dayArrowUp- Previous weekArrowDown- Next weekEnter- Select current dateEscape- Close calendar
Date Formatting
The format prop supports the following tokens:
MM- Month number (01-12)dd- Day of the month (01-31)yyyy- Full year
Examples:
MM/dd/yyyy- 04/07/2025dd/MM/yyyy- 07/04/2025yyyy-MM-dd- 2025-04-07
Accessibility
The Calendar component follows WAI-ARIA guidelines for date pickers:
- Calendar opens in a dialog with proper ARIA labeling
- Navigation buttons have descriptive labels
- Date grid uses proper table semantics with row and column headers
- Selected dates are indicated with
aria-selected - Keyboard navigation support
- Disabled dates are properly indicated