Command Palette
Search for a command to run...
Calendar
Interactive calendar for selecting single dates, multiple dates, or date ranges.About Calendar
A flexible calendar component built on react-day-picker that supports single, multiple, and range selection modes. Includes navigation buttons, disabled date constraints, localization support, and customizable styling through React DayPicker props.Installation
Import the Calendar component from LSD:import { Calendar } from '@nipsys/lsd'
export default function MyComponent() {
return <Calendar />
}Usage
The simplest form of the component with default styling.Basic
Features
Additional features and capabilities of the component.Form Controlled
With Validation
Composition
Calendar
└── CalendarDayButton
API Reference
React DayPicker Documentation
Calendar is built on react-day-picker and extends all its props
Accessibility
The component follows accessibility best practices for screen readers and keyboard navigation.Keyboard Navigation
Keyboard shortcuts and navigation
• Arrow keys - Navigate between days• Page Up/Down - Navigate between months• Home/End - Navigate to first/last day of month• Enter or Space - Select a day• Tab - Navigate into/out of calendar
ARIA Attributes
Proper ARIA attributes for screen readers
• role="grid" on the calendar container• role="gridcell" and aria-label on each day button• aria-selected indicates selected dates• aria-disabled indicates disabled dates• aria-describedby links to supporting text
Focus States
Visible focus indicators for keyboard users
• Arrow key navigation moves focus between grid cells. Tab focus moves into the calendar. Enter or Space activates the focused day.