Skip to main content

Calendar

StorybookView in Storybook

Explore interactive examples and all component variations in our Storybook.

The Calendar component provides an interactive date picker with month navigation and locale support. Built with accessibility in mind, it supports keyboard navigation and screen readers.

Basic Usage​

January 2026

With Selected Date​

January 2026

Selected: 1/22/2026

Different Languages​

January 2026

Selected: 1/22/2026

Date Range Selection​

January 2026

Start Date: Not selected

End Date: Not selected

Select start date

Properties​

Calendar​

PropertyTypeDefaultDescription
selectedDateDate-Currently selected date.
onChange(date: Date) => void-Callback fired when a date is selected.
language"enUS" | "ptBR""enUS"Language for month and day names.

Features​

Accessibility​

  • Full keyboard navigation support
  • Screen reader compatible with ARIA labels
  • Proper focus management
  • Live region announcements for month changes

Internationalization​

  • Support for English (enUS) and Portuguese (ptBR)
  • Localized month and day names
  • Easy to extend with additional locales
  • Month navigation with arrow buttons
  • Keyboard navigation between dates
  • Visual feedback for selected dates

Common Use Cases​

The Calendar component is perfect for:

  • Date pickers - Select single dates in forms
  • Event scheduling - Choose dates for appointments or events
  • Date range selection - Select start and end dates for bookings
  • Birthday selection - User profile date inputs
  • Deadline setting - Project management and task scheduling
  • Availability calendars - Show available dates for services
  • Historical data - Navigate through time-based data

Best Practices​

  1. Provide clear feedback - Always show which date is selected
  2. Handle edge cases - Consider leap years, month boundaries
  3. Accessibility first - Ensure keyboard navigation works properly
  4. Localization - Use appropriate language for your users
  5. Visual hierarchy - Make selected dates clearly distinguishable
  6. Mobile friendly - Ensure touch targets are large enough
  7. Date validation - Validate selected dates on the application level

Keyboard Navigation​

  • Arrow keys - Navigate between dates
  • Enter/Space - Select the focused date
  • Tab - Move focus to navigation buttons
  • Escape - Close calendar (when used in popover/modal)