Primitive

Calendar panel

Calendar picker panel with month navigation, weekdays, range, and disabled states.

CalendarGrid owns date grid chrome and keyboard/selectable day affordances. DatePicker and DateRangePicker own value state and range commit behavior.
form
DOM renderImage render
Calendar panelDefault
April 2026
MonTueWedThuFriSatSun

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Single selected date.
April 2026
MonTueWedThuFriSatSun
Render state

Range

Selected date range.
April 2026
MonTueWedThuFriSatSun
Render state

Disabled

Calendar with bounded selectable dates.
April 2026
MonTueWedThuFriSatSun
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
monthstring2026-04-01Visible month ISO date.
selectedStartstring-Selected start ISO date.
selectedEndstring-Selected end ISO date.
minstring-Minimum selectable ISO date.
maxstring-Maximum selectable ISO date.