Calendar

Installation

npx shadcn@latest add @blank/calendar

Usage

import { Calendar } from "@/components/ui/calendar"

const [date, setDate] = React.useState<Date | undefined>(new Date())

<Calendar mode="single" selected={date} onSelect={setDate} />

To open a calendar from a field, put it in a Popover. Date Picker shows how.

Examples

Range

mode="range" with two months side by side. Each week of a range reads as one capsule, so a range that spans weeks still scans as a single selection.

Month and year dropdowns

captionLayout="dropdown" for dates far from today, like a birthday. Bound it with startMonth and endMonth.

API Reference

Calendar

Every react-day-picker DayPicker prop (mode, selected, onSelect, disabled, numberOfMonths and the rest), plus:

CalendarDayButton

The day cell, exported so a custom components.DayButton can wrap it instead of starting over.