Calendar

Status: stableAccessibility reviewedtenet-ui@0.4.0

import { Calendar } from 'tenet-ui';

Source: src/components/Calendar/Calendar.tsx

Usage guidelines

When to use: an always-visible month grid for picking a day — e.g. inline in a booking flow, or hosted in a popover by DatePicker. For a compact field that opens on demand, reach for DatePicker (which wraps this).

Rules

Give it an accessible name via aria-label (e.g. “Departure date”).
Control it with value + onChange, or leave uncontrolled with defaultValue. onChange hands you a real Date.
Constrain selectable days with min / max — out-of-range days are disabled and the month-nav arrows stop at the boundary.
Set weekStartsOn={1} for Monday-first locales. Month and weekday names follow locale (defaults to the runtime locale) — don’t hardcode English.
It implements the ARIA grid + roving-tabindex keyboard model (arrows, Home/End, PageUp/PageDown, Enter/Space). Don’t rebuild this with a plain table of clickable <div>s.

Do / Don’t

✅ <Calendar aria-label="Departure date" defaultValue={new Date()} min={new Date()} />
✅ controlled: <Calendar value={date} onChange={setDate} weekStartsOn={1} />
❌ A grid of <div onClick> cells — no keyboard, no roles, no roving focus.
❌ Formatting the month/weekday labels yourself in English — pass locale and let Intl do it.

Examples

4 stories for Calendar — open in Storybook

Default components-calendar--default
With Selection components-calendar--with-selection
Monday Start components-calendar--monday-start
With Range components-calendar--with-range

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Prop	Type	Default	Description
`value`	`Date \| null`	—	Controlled selected date (null = nothing selected).
`defaultValue`	`Date \| null`	—	Uncontrolled initial selected date.
`onChange`	`(date: Date) => void`	—	Called with the chosen date.
`month`	`Date`	—	Controlled visible month (any day within the month).
`defaultMonth`	`Date`	`selected \| today`	Uncontrolled initial visible month. Defaults to the selected date's month, else today.
`onMonthChange`	`(month: Date) => void`	—	Called when the visible month changes (nav buttons / keyboard paging).
`min`	`Date`	—	Earliest selectable day (inclusive).
`max`	`Date`	—	Latest selectable day (inclusive).
`weekStartsOn`	`WeekStart`	`0`	First day of the week: 0 = Sunday (default), 1 = Monday.
`locale`	`string`	`runtime locale`	BCP-47 locale for month / weekday formatting. Defaults to the runtime locale.
`className`	`string`	—
`aria-label`	`string`	—