Calendar
A date picker component with intuitive date selection.
When To Use
Use the Calendar component when you need to allow users to select dates or date ranges. It's useful for:
- Selecting a single date (e.g., appointments, events)
- Selecting date ranges (e.g., hotel bookings, report periods)
- Displaying important dates or events
- Form inputs that require date selection
- Scheduling interfaces
The Calendar component provides an intuitive way to browse and select dates with various customization options.
Examples
May 2025
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Selected range: Sun May 25 2025 to Sun Jun 01 2025
May 2025
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
June 2025
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Selected dates: Sun May 25 2025
May 2025
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Selected: Sun May 25 2025
May 2025
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Props
Prop | Type | Default |
---|---|---|
displayName | string | - |