Calendar
A calendar showing dates across the span of a month. They can be interactive and selectable.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Calendar } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultSelected | string | — | The date selected on first render, as an ISO string. |
| onSelect | (iso: string) => void | — | Called with the chosen date as an ISO string. |
| label | string | 'Choose a date' | Names the calendar for assistive technology. Say what the date is for. |
Accessibility
What the component does for you, and what it needs from you.
- The grid is a real table of dates, so a screen reader can move by week as well as by day.
- The label says what the date is for, which is the part a bare grid cannot convey.
- Keyboard movement across days and weeks matters more here than anywhere else, because paging with a pointer is slow.