Month grid · single date
Prev/next nav, today chip pulse, selected-date highlight. Arrow keys move focus, Enter/Space selects, PageUp/PageDown changes month.
none
Calendar
A month grid that doubles as a range picker, a popover, or an inline panel — keyboard-first, locale-aware via Intl.DateTimeFormat, zero stylesheet override required.
Date-range picker
Click a start, click an end. Hover previews the in-range cells. Click again to reset.
none
Inline · always open
No trigger — drops straight into a form, sidebar, or onboarding flow. Identical keyboard model.
Popover · anchored to input
Click the field to open. Escape closes and returns focus. Click-outside dismisses.
Disabled dates
Past dates and weekends are dimmed and non-selectable. The constraint is declarative: a data-disable attribute on the wrapper.
none
Keyboard navigation
Focus a cell, then: ←→↑↓ move by day, PageUp/Down by month, Home/End jump to week edges, Enter selects, Escape blurs.
Usage
One root: <div data-cal data-mode="single|range" data-disable="past,weekends">. The script hydrates the month grid, wires keyboard nav, and emits a lsd:cal:select CustomEvent with { iso, date } in detail. Dates render through Intl.DateTimeFormat so locales come for free.
data-mode="single"· one selected datedata-mode="range"· drag-select a start → end rangedata-disable="past,weekends,future"· CSV of constraint keywordsaria-pressedtracks selection per cell,aria-labelreads full date