Calendar

A keyboard-navigable Gregorian month grid with date-only values.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Arrow keys move days. Page Up/Down changes month.

Review date: 2026-10-23. Local date-only value.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add calendar

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Calendar value={date} onValueChange={setDate}
  locale="id-ID" weekStartsOn={1}
  min="2026-10-01" max="2027-12-31" today="2026-10-23" />

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`value / defaultValue / onValueChange`	`YYYY-MM-DD / (string) => void`	`''`
`month / defaultMonth / onMonthChange`	`YYYY-MM / (string) => void`	`selected date or today`
`min / max`	`YYYY-MM-DD`	`optional`
`disabled`	`boolean \| (date: string) => boolean`	`false`
`locale / weekStartsOn`	`Intl locale / 0–6 (Sunday–Saturday)`	`en-US / 0`
`today`	`YYYY-MM-DD`	`current UTC date`

Accessibility

Single-date Gregorian grid with YYYY-MM-DD values and UTC arithmetic, preventing host timezone/DST offsets. Month is YYYY-MM; labels use Intl with locale and explicit weekStartsOn. One date button is in Tab order. Arrows move by day/week (horizontal keys respect RTL), Home/End moves within the week, Page Up/Down changes month, Shift adds year navigation, Enter/Space selects. Unavailable dates remain keyboard-discoverable with aria-disabled and cannot be selected. min/max clamp navigation; header controls respect month boundaries. Today has aria-current=date and the month heading announces changes. Disabled=true removes day buttons from Tab order. Controlled date/month and reset state are consumer-owned. Ref/native attributes target the div; standalone Calendar does not submit form data. UTC today is the default; pass a local date-only today when the application uses another time zone. Ranges, multiple months and alternate calendar systems are not included.

Sun	Mon	Tue	Wed	Thu	Fri	Sat