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.
June 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Variants
June 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
June 2025
Su
Mo
Tu
We
Th
Fr
Sa
Sizes
Control the calendar size with the size prop.
June 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
June 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
June 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Week Configuration
Customize the first day of the week and show week numbers.
June 2025
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Week Numbers
Display week numbers alongside the calendar.
June 2025
Wk
Sun
Mon
Tue
Wed
Thu
Fri
Sat
22
23
24
25
26
Disabled Dates
Restrict date selection with various disability patterns.
June 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
June 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Date Range Restrictions
Set minimum and maximum selectable dates.
June 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Custom Formatting
Customize how months and weekdays are displayed.
June 2025
SUN
MON
TUE
WED
THU
FRI
SAT
Disabled State
Disable the entire calendar.
June 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Event Handling
Handle date selection with custom logic.
June 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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 |
variant | 'default' | 'compact' | 'bordered' | 'default' | Visual style variant |
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.