Calendar
A date picker calendar component. Supports single date selection and date ranges. Built on React Day Picker.
$cookest-ui add calendar
Single Date
Select a single date — for scheduling a recipe or meal plan day.
May 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Selected: Tuesday, 19 May 2026
Date Range
Select a date range — for planning a weekly meal prep schedule.
May 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
June 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
From: 5/19/2026
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "single" | "range" | "multiple" | — | Selection mode. |
selected | Date | DateRange | Date[] | — | Controlled selected date(s). |
onSelect | (date) => void | — | Callback when a date is selected. |
disabled | Matcher | — | Dates to disable (e.g. past dates, specific days). |
numberOfMonths | number | 1 | Number of months to show at once. |