# calendarKeys

> Day navigation for a Calendar grid: the Arrow/Page/Home/End keys and a click on a day cell both move a `CalendarModel`'s focused day, which mirrors back onto the grid as roving `tabindex` and DOM focus.

```ts
import { calendarKeys } from "@sdxc/ui/mixins";
```

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

```ts
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

```tsx
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.

### 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.

#### Signature

```ts
const CALENDAR_DAY_DATE_ATTRIBUTE = "data-date"
```