Docs › Components › Calendar

Shadcn Calendar

The shadcn/ui Calendar is an inline date picker built on react-day-picker and styled with Tailwind CSS v4. It supports single, range, and multiple selection, disabled dates, and localization. The Calendar is the basis of the Date Picker when paired with a Popover.

Key features

• Single, range, or multiple date selection via the mode prop.
• Disabled dates, min and max ranges, and multiple months.
• Localization and custom formatting through react-day-picker.
• Keyboard navigation across days, weeks, and months.
• Pairs with a Popover to build a Date Picker.

Installation

npx shadcn@latest add calendar

Usage

"use client"
import { useState } from "react"
import { Calendar } from "@/components/ui/calendar"

export function Example() {
  const [date, setDate] = useState<Date | undefined>(new Date())
  return <Calendar mode="single" selected={date} onSelect={setDate} />
}

Range selection

Set mode="range" and hold a DateRange ({ from, to }) in state to let people pick a start and end date.

import type { DateRange } from "react-day-picker"

const [range, setRange] = useState<DateRange | undefined>()

<Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />

Disabled dates

<Calendar mode="single" disabled={{ before: new Date() }} />

Built on react-day-picker

The Calendar wraps react-day-picker with shadcn styling and is independent of the UI primitive layer.

Accessibility

• The grid is keyboard-navigable: arrow keys move by day, and Page Up/Down move by month.
• Selected and disabled dates are exposed to assistive tech; keep any custom day rendering accessible.
• When used in a popover, give the trigger button a clear label such as the current date or "Pick a date".

When to use the Calendar

Use the Calendar inline when a visible date grid helps, such as a booking screen or a dashboard filter. When space is tight, wrap it in a Popover as a Date Picker. For a single free-form date, a plain Input with type="date" may be enough.

Used in these blocks

• Checkout forms: delivery date selection.
• Apps: scheduling and booking screens.
• Widgets: date-range filters.

Related components

The Calendar pairs with a Popover and a Button to form a Date Picker, and often sits inside a Form or Card.

FAQ

What is the shadcn calendar used for?

The Calendar lets users pick a date, a date range, or multiple dates inline. It is the basis of the Date Picker when combined with a Popover.

Does the shadcn calendar use react-day-picker?

Yes. The Calendar wraps react-day-picker with shadcn styling, and passes through its props for modes, disabled dates, and localization.

How do I select a date range?

Set mode to range and manage a selected object with from and to dates via selected and onSelect.

How do I disable past dates?

Pass a disabled matcher such as { before: new Date() } to the Calendar.