Calendar

Usage

Import the component and render it.

import { Calendar } from 'src/components/Calendar/Calendar';

<Calendar selection="single" month="2026-10" today="2026-10-01" />

Accessibility

Role: group named by the month and year, with a table of date buttons.

• Only one date is in the Tab order: the selected date, else today, else the first of the month.
• Each date is named by its full date; today has aria-current="date" and the selected dates aria-pressed="true".
• The month and year are a live region, so moving to another month is announced.

Selection

Set the selection prop: Single is "single", Range is "range".

<Calendar selection="single" />
<Calendar selection="range" />

Composition

Use the following composition to build a Calendar:

Calendar
├── CalendarDate
└── Button

<CalendarDate label="14" />

Used in

Calendar is part of DatePicker.

Actions

Pass callbacks to respond to the component.

import { Calendar } from 'src/components/Calendar/Calendar';

<Calendar
  selection="single"
  month="2026-10"
  today="2026-10-01"
  onValueChange={(value) => console.log(value)}
  onRangeStartChange={(value) => console.log(value)}
  onRangeEndChange={(value) => console.log(value)}
  onMonthChange={(month) => console.log(month)}
/>