[ @sdxc/ui/mixins ]
calendarKeys
Day navigation for a Calendar grid.
import { calendarKeys } from "@sdxc/ui/mixins";Usage
Adds keyboard and pointer navigation to a Calendar grid: each key delegates
to the matching CalendarModel method, a click focuses the day cell it
lands on, and any focusedDate change re-syncs tabindex and DOM focus.
Signature
calendarKeys(model: CalendarModel): MixinDescriptor<HTMLElement>Parameters
| Parameter | Type | Description |
|---|---|---|
model | CalendarModel | Behavior class instance owning the grid's focused day, visible month, and range selection state. |
Examples
let model = new CalendarModel();
<div role="grid" mix={[calendarKeys(model)]} />Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
Constant
CALENDAR_DAY_DATE_ATTRIBUTE
Attribute every calendar day cell exposes its date on, in local
YYYY-MM-DD form, that calendarKeys() matches against a
CalendarModel's focused day to move roving tabindex and DOM focus.
const CALENDAR_DAY_DATE_ATTRIBUTE = "data-date"