Components
Calendar
A versatile and accessible calendar component with support for single-day, multiple-day, and range selection modes.
Previews with Code
Example 1: Single-Day Selection Calendar
July 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Example 2: Multiple-Day Selection Calendar
July 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Example 3: Range Selection Calendar
July 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Installation
The Calendar component offers a flexible and accessible solution for date selection.
Quickly add the component using:
File Structure
Props
The Calendar component includes the following props:
| Prop | Type | Default |
|---|---|---|
mode | "single" | "multiple" | "range" | "single" |
selected | "Date | Date[] | DateRange" | - |
onSelect | (date: Date | Date[] | DateRange) => void | - |
className | string | - |
Features
- Multiple Selection Modes:
- Supports
single,multiple, andrangeselection.
- Supports
- Integration with React DayPicker:
- A powerful and customizable date-picker library.
- Customizable Styling:
- Use the
classNameprop to apply custom styles.
- Use the
- Accessibility:
- Built with
aria-liveand region attributes for screen reader compatibility.
- Built with
Accessibility
The Calendar component is built using the React DayPicker library, which provides excellent accessibility out of the box. Ensure meaningful labels and descriptions are provided for selected dates.
Conclusion
The Calendar component is a robust and flexible tool for