components
/components/ui/calendar.tsx /components/ui/calendar.tsx
Calendar
Display and select dates with interactive calendar + Select dates from a calendar
Installation
Usage
Imports
import { Calendar } from "@/components/ui/calendar"Code
<Calendar mode="range" />Examples
With Quickview Presets
With Time Picker
Double Calendar
With Footer
Year and Month Selector
Manual Time Input
Scrollable Time & Availability status
The Calendar is built on top of react-day-picker. For more details, refer to
the official documentation.
Props
<Calendar>
| Name | Default | Values |
|---|---|---|
| External Reference | - | - |