KQ-499 · ALMANAC/PICKER
Almanac Picker
A month grid that moves by direction: the next month enters from distances.shift on the right while the old one leaves on the exit ease, and the frame's measured height glides so a five-row month never jumps to a six-row one. A chosen day stamps on recoil and today wears a ring; in range mode the fill sweeps between the ends on a scaleX tween. Arrows move a day, PageUp and PageDown change month, Home and End jump to the week's ends, and Enter selects.
KQ-499 · ALMANAC/PICKER
Basinworks stay
May 2026
Basinworks stay 14 May to 18 May · 4 nights
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/almanac-picker
Props
- mode
- "single" | "range"
- default "single"
- One date, or a start and an end.
- value / defaultValue
- Date | [Date, Date | null]
- default —
- Selection, shaped by mode; a range in progress carries a null end.
- onValueChange
- (value: Date | [Date, Date | null]) => void
- default —
- Fires on selection; opening a range fires once with a null end, then again when it closes.
- min / max
- Date
- default —
- Bounds; days outside are disabled and refuse selection.
- label
- string
- default "Date"
- Group label; the grid is named from it and the month.
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "single" | "range" | "single" | One date, or a start and an end. |
| value / defaultValue | Date | [Date, Date | null] | — | Selection, shaped by mode; a range in progress carries a null end. |
| onValueChange | (value: Date | [Date, Date | null]) => void | — | Fires on selection; opening a range fires once with a null end, then again when it closes. |
| min / max | Date | — | Bounds; days outside are disabled and refuse selection. |
| label | string | "Date" | Group label; the grid is named from it and the month. |