Calendar
A month grid for picking a date or a date range, built on React DayPicker.
npx prodular-ui add calendarSingle date
Past dates are disabled. Today has a small dot.
"use client"
import * as React from "react"
import { Calendar } from "@/components/ui/calendar"
export default function CalendarDefault() { const [date, setDate] = React.useState<Date | undefined>(new Date(2026, 9, 24)) return ( <Calendar mode="single" selected={date} onSelect={setDate} defaultMonth={new Date(2026, 9, 1)} today={new Date(2026, 9, 21)} disabled={{ before: new Date(2026, 9, 21) }} className="rounded-xl border bg-card shadow-xs" /> )}Range
Two months for ranges that cross a month end.
"use client"
import * as React from "react"import type { DateRange } from "react-day-picker"
import { Calendar } from "@/components/ui/calendar"
export default function CalendarRange() { const [range, setRange] = React.useState<DateRange | undefined>({ from: new Date(2026, 9, 12), to: new Date(2026, 9, 23), }) return ( <Calendar mode="range" numberOfMonths={2} selected={range} onSelect={setRange} defaultMonth={new Date(2026, 9, 1)} today={new Date(2026, 9, 21)} className="rounded-xl border bg-card shadow-xs" /> )}Month and year dropdowns
For dates far from today, such as a birthday.
"use client"
import * as React from "react"
import { Calendar } from "@/components/ui/calendar"
export default function CalendarDropdowns() { const [date, setDate] = React.useState<Date | undefined>(new Date(1991, 4, 14)) return ( <Calendar mode="single" captionLayout="dropdown" selected={date} onSelect={setDate} defaultMonth={new Date(1991, 4, 1)} startMonth={new Date(1940, 0)} endMonth={new Date(2026, 11)} className="rounded-xl border bg-card shadow-xs" /> )}Anatomy
<Calendar mode="single" selected={date} onSelect={setDate} />Guidance
Use it when
- Picking a due date, a booking date or a reporting range where the day of the week matters.
Avoid
- Dates people know by heart, such as a birthday, as the only input. Offer a text input too or use dropdowns.
- Time of day. Pair it with an Input or Select for time.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Set mode to single, multiple or range and control selected with onSelect.
- Disable dates people cannot pick with disabled (for example { before: today }) rather than validating afterwards.
- Use numberOfMonths={2} for ranges.
- In a popover, render it without a border. Standalone, give it rounded-xl border bg-card shadow-xs.
API
Calendar
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "single" | "multiple" | "range" | Selection behaviour. | |
| selected / onSelect | Date | Date[] | DateRange | Controlled selection. | |
| disabled | Matcher | Matcher[] | Dates that cannot be picked. | |
| captionLayout | "label" | "dropdown" | "label" | Static caption or month and year dropdowns. |
| numberOfMonths | number | 1 | Months shown side by side. |
| buttonVariant | Button variant | "ghost" | Style of the previous and next buttons. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add calendar# or, with the registry in components.jsonnpx shadcn@latest add @prodular/calendar