# rangePreview

> Hover-and-focus range preview for a RangeCalendar grid: extends a `CalendarModel`'s pending range toward whichever day cell is under the pointer or focus, and mirrors the result onto the grid's day cells.

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

Adds hover/focus range-preview behavior to a RangeCalendar grid, extending
`model`'s pending range toward the hovered or focused day cell once an
anchor is set, and mirroring the result onto every day cell as attributes.

## Signature

```ts
rangePreview(model: CalendarModel): MixinDescriptor<HTMLElement>
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `model` | `CalendarModel` | Calendar model already constructed by the consumer, shared with any `calendarKeys()` mixin applied to the same grid. |

## Examples

```tsx
let model = new CalendarModel();
<div role="grid" mix={[calendarKeys(model), rangePreview(model)]} />
```