Calendar
A calendar shows the dates in a month. It can be interactive, so users can select dates.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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 | None | The date selected on first render, as an ISO string. |
| onSelect | (iso: string) => void | None | 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. The grid alone cannot tell people that.
- Keyboard movement across days and weeks is especially important here, because paging with a pointer is slow.