Calendar
Date selection calendar built on React DayPicker.
Quick Preview
Usage
<Calendar mode="single" />Examples
Default Calendar
Use this as the starting point for Calendar. Keep product data, routing, fetching, and authorization logic in the consuming app.
Month and year dropdowns
Set captionLayout="dropdown" to replace the caption label with searchable month and year comboboxes — type inside the popup to filter long lists. Bound the year range with startMonth/endMonth.
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
| DayPicker props | React DayPicker props | - | Passed to the underlying DayPicker (mode, selected, onSelect, disabled, ...). |
captionLayout | `"label" | "dropdown" | "dropdown-months" |
startMonth / endMonth | Date | - | Navigation bounds; also bound the year dropdown. |
weekStartsOn | `0 | 1 | ... |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Provide visible labels or accessible names for interactive controls.
- Caption dropdowns are labelled comboboxes ("Choose the Month" / "Choose the Year") with keyboard search.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.