Calendar
The Calendar component provides an intuitive and customizable way to select dates in your application.
Usage
First of all, you need to import the Calendar component from the kitchn package.
import { Calendar } from "kitchn";Single date selection
Multiple date selection
Date Range Selection
Props
| Name | Type | Default | Required | Description | Accepted values |
|---|---|---|---|---|---|
mode | string | "single" | ✅ | The selection mode of the calendar. | "single", "multiple", "range" |
selected | Date | Date[] | DateRange | undefined | undefined | - | The currently selected date(s). Type depends on mode. | - |
onSelect | (date: Date | Date[] | DateRange) => void | - | ✅ | Callback function when a date is selected. | - |
About
The Calendar component is built on top of React DayPicker (opens in a new tab), providing a robust foundation for date picking functionality.