Forms and dates
useCalendar
Builds an Astro-compatible calendar grid with hidden input value, min/max clamping, month navigation, selection, and roving keyboard focus.
Live component preview · Astro
Explore Calendar
Try the component this hook connects to. The preview uses the Astro adapter; the React example below uses useCalendar.
July 2026
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
| 29 | 30 | 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 | 1 | 2 |
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
July 2026
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
| 29 | 30 | 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 | 1 | 2 |
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
July 2026
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
| 29 | 30 | 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 | 1 | 2 |
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
React usage
Import from @santi020k/lumen-react and spread the controller props onto the matching components.
import { Calendar } from '@santi020k/lumen-react'
export function DeliveryDate() {
return (
<Calendar
max="2026-07-31"
min="2026-07-01"
month="2026-07"
name="delivery"
/>
)
}import { Calendar } from '@santi020k/lumen-react'
export function DeliveryDate() {
return (
<Calendar
max="2026-07-31"
min="2026-07-01"
month="2026-07"
name="delivery"
/>
)
}Load @santi020k/lumen-react/styles.css once in your application. With React Server Components, put 'use client' at the top of the module that calls the hook. Follow the React setup guide for the framework boundary.
Options
| Property | Type | Default | Description |
|---|---|---|---|
| value | string | - | Controlled selected date in YYYY-MM-DD format. |
| defaultValue | string | "" | Initial selected date for uncontrolled usage. |
| month | string | selected month or today | Visible month in YYYY-MM format. |
| min / max | string | - | Inclusive date bounds in YYYY-MM-DD format. |
| onValueChange | (value: string) => void | - | Callback fired when a date is selected. |
Controller return values
| Property | Type | Description |
|---|---|---|
| rootProps | LumenProps<"div"> | Spread onto the calendar root. |
| inputProps | LumenProps<"input"> | Spread onto the hidden input. |
| previousProps / nextProps | LumenProps<"button"> | Spread onto month navigation buttons. |
| weeks | CalendarDay[][] | Six calendar rows of generated day models. |
| getDayProps | (day, props?) => LumenProps<"td"> | Returns gridcell props for a generated day. |
| selectDate | (date) => void | Select a date programmatically. |