Calendar
A fully featured date picker with keyboard navigation, accessibility support, and customizable styling.
Installation
npx nocta-ui add calendarUsage
Basic Calendar
A simple calendar with date selection functionality.
August 2025
Su
Mo
Tu
We
Th
Fr
Sa
Week Configuration
Customize the first day of the week and show week numbers.
August 2025
Mo
Tu
We
Th
Fr
Sa
Su
Week Numbers
Display week numbers alongside the calendar.
August 2025
Wk
Su
Mo
Tu
We
Th
Fr
Sa
30
31
32
33
34
35
Disabled Dates
Restrict date selection with various disability patterns.
August 2025
Su
Mo
Tu
We
Th
Fr
Sa
Date Range Restrictions
Set minimum and maximum selectable dates.
August 2025
Su
Mo
Tu
We
Th
Fr
Sa
Custom Formatting
Customize how months and weekdays are displayed.
August 2025
SU
MO
TU
WE
TH
FR
SA
Disabled State
Disable the entire calendar.
August 2025
Su
Mo
Tu
We
Th
Fr
Sa
Event Handling
Handle date selection with custom logic.
August 2025
Su
Mo
Tu
We
Th
Fr
Sa
Keyboard Navigation
The Calendar component supports full keyboard navigation:
- Arrow Keys: Navigate between dates
- Home: Go to first day of month
- End: Go to last day of month
- Enter/Space: Select the focused date
- Tab: Move focus to navigation buttons
Accessibility
- Full ARIA support with proper labels and roles
- Screen reader announcements for date selection
- Keyboard navigation support
- Focus management
- High contrast mode support
API Reference
Calendar Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | Date | undefined | - | The selected date (controlled) |
defaultValue | Date | undefined | - | The default selected date (uncontrolled) |
onChange | (date: Date | undefined) => void | - | Callback when date is selected |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the calendar |
disabled | boolean | false | Whether the calendar is disabled |
disabledDates | Date[] | ((date: Date) => boolean) | - | Dates to disable |
minDate | Date | - | Minimum selectable date |
maxDate | Date | - | Maximum selectable date |
showWeekNumbers | boolean | false | Whether to show week numbers |
showOutsideDays | boolean | true | Whether to show days from other months |
weekStartsOn | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 0 | First day of week (0 = Sunday) |
formatMonth | (date: Date) => string | - | Custom month formatting function |
formatWeekday | (date: Date) => string | - | Custom weekday formatting function |
className | string | - | Additional CSS classes |
aria-label | string | 'Calendar' | Accessibility label |
The Calendar component also accepts all standard HTML div attributes.