Calendar

A locale-aware month grid with keyboard navigation between days.

Import
import { Calendar } from '@texuli/primitives/calendar';
Pattern
Date picker dialog (grid) (WAI-ARIA APG)
Size budget
14.0 KiB gzip for @texuli/primitives/calendar
Reference
packages/primitives/docs/prim-calendar.md

Live demo

Loading the Calendar demo…

Anatomy

Calendar anatomy: each box holds the parts inside it.
  • Calendar.Root
    • Calendar.Heading
    • Calendar.PrevButton
    • Calendar.NextButton
    • Calendar.Gridone button per day

Behavior checks

tests/behavior/scenarios/calendar.spec.ts runs 7 rows against the Calendar scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 7 rows
  1. the calendar exposes a named grid with localized weekday headers and one tab stop
  2. arrows, Home, End and Page keys navigate the calendar grid
  3. a pointer selects an available day and reports its date value
  4. a touch tap selects an available day
  5. minimum, maximum and unavailable dates cannot be selected
  6. RTL reverses horizontal grid navigation
  7. axe finds no calendar accessibility violations

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 14.0 KiB gzip for @texuli/primitives/calendar (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).