Calendar
Displays an interactive month grid that lets users browse dates, select individual days, or choose date ranges for scheduling.
4.9 KB
•Updated on August 21, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/primitives-calendarUsage
Code
import { Calendar } from '@/components/ui/calendar'Code
<Calendar />Features
Disabled Dates
Calendar configured with specific disabled dates and range constraints.
API Reference
This component wraps @daypicker/react with custom styling.
Calendar
A calendar component for date selection.
| Prop | Type | Default | Description |
|---|---|---|---|
mode | single|multiple|range | single | Selection mode for the calendar |
captionLayout | label|dropdown|dropdown-months|dropdown-years | label | Caption layout - use "dropdown" for month/year dropdowns |
selected | Date|Date[]|DateRange | - | The selected date(s) |
onSelect | (date: Date|Date[]|DateRange) => void | - | Callback when date selection changes |
showOutsideDays | boolean | true | Show days from adjacent months |
startMonth | Date | - | First month to show in dropdown navigation |
endMonth | Date | - | Last month to show in dropdown navigation |
buttonVariant | ghost|outline|... | ghost | Button variant for navigation buttons |
classNames | object | - | Custom class names for calendar parts |
components | object | - | Custom components to override defaults |
For the full list of props, see the @daypicker/react documentation.
Customizing Cell Size
The calendar uses CSS custom properties for cell sizing. By default, the cell size is --spacing(9) on mobile and --spacing(8) on larger screens:
Code
[--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)]You can customize the cell size by passing a custom className:
Code
<Calendar className="[--cell-size:--spacing(11)]" />Or use responsive values:
Code
<Calendar className="[--cell-size:--spacing(11)] sm:[--cell-size:--spacing(10)]" />Examples
Calendar with custom cell size
Calendar with date range selection
Calendar with month/year dropdown navigation
Calendar with custom Select dropdown for month/year
Calendar with Combobox dropdown for month/year
Calendar with multiple date selection
Calendar with rounded day buttons
Calendar with rounded range selection style
Calendar with right-aligned navigation
Calendar with week numbers
Calendar with year-only combobox dropdown
Calendar without arrow navigation (dropdown only)
Calendar with current month button
Calendar with today button
Calendar with date input
Calendar with time input
Calendar with time slots (appointment picker)
Calendar with date presets
Range calendar with date presets
Two months calendar
Three months calendar
Pricing calendar with custom day buttons
Calendar with 24-hour autocomplete time input