Calendar
A date picker component with range and multiple selection support.
Installation
npx shadcn@latest add https://ui.saturation.io/r/calendar.jsonUsage
import { Calendar } from "@/components/ui/calendar"
import { useState } from "react"
export default function Example() {
const [date, setDate] = useState<Date | undefined>(new Date())
return (
<Calendar
mode="single"
selected={date}
onSelect={setDate}
/>
)
}Examples
Default
Date Range
Select a range of dates by setting mode to "range".
Multi Month
Display multiple months at once using the numberOfMonths prop.
Multi Month with Date Range
Combine multiple months with range selection for better date range visibility.
Disabled Dates
Disable specific dates using the disabled prop with an array of dates or a matcher function.
Disabled Weekends
Disable all weekend dates using a matcher function.
Month and Year Picker
Enable month and year selection with dropdown controls using captionLayout.
With Event List
Display a calendar with an event list showing scheduled items for the selected date.
With Time Input
Combine date selection with time input for scheduling and appointment booking.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | single | range | multiple | single | The selection mode |
| selected | Date | DateRange | - | The selected date(s) |
| onSelect | function | - | Callback when date is selected |
| numberOfMonths | number | 1 | Number of months to display |
| disabled | Date[] | function | - | Dates to disable |
| captionLayout | buttons | dropdown | dropdown-buttons | buttons | Layout for the caption |
| fromYear | number | - | Start year for dropdown |
| toYear | number | - | End year for dropdown |
| showOutsideDays | boolean | true | Whether to show dates from adjacent months |
On This Page
Deploy your Saturation UI app
Build beautiful, saturated interfaces with our component library.
Deploy to Vercel for the best performance and developer experience.