A month grid for picking a single date, several dates, or a range, built on React DayPicker and styled with the Button component.
Loading...
"use client";import { useState } from "react";import { Calendar } from "@/components/ui/calendar";const DEMO_DATE = new Date(2026, 6, 15);export function CalendarDemo() { const [date, setDate] = useState<Date | undefined>(DEMO_DATE); return ( <Calendar captionLayout="dropdown" className="rounded-lg border" defaultMonth={DEMO_DATE} mode="single" onSelect={setDate} selected={date} /> );}
About
The Calendar component is built on top of
React DayPicker. DayPicker does the date
work: building the month grid, tracking selection, keyboard navigation, and
locales. This component is the styling layer over it, so the calendar matches
everything else in the registry rather than looking like a plugin dropped into
the page.
Each day is a Button in the ghost variant, which is why hover, focus rings,
and disabled states behave the same here as they do anywhere else. Sizing runs
off two CSS variables on the root, --cell-size and --cell-radius, so you can
grow the whole grid or square off the cells with a class rather than by editing
the component. Set captionLayout to dropdown to swap the month label for
month and year selects, buttonVariant to restyle the previous and next arrows,
and showOutsideDays to show or hide the days that spill in from neighbouring
months. Right-to-left is handled: the navigation chevrons flip when the calendar
renders inside an rtl direction.
mode decides what a click does. single holds one date, multiple collects an
array, and range records a start and an end and fills the days between them.
The type of selected follows the mode, so a range calendar hands onSelect a
{ from, to } object rather than a Date. Pass disabled to block dates that
cannot be chosen, such as days in the past or ones already booked, and
defaultMonth to open on a month other than the current one.
The calendar renders as a block with no border of its own, which is why the
example adds rounded-md border. Drop that when the calendar sits inside a
Popover or a Card that already has an edge.
See the React DayPicker documentation for the
full prop list, including locales, week numbers, and custom day rendering.
Date Picker
A calendar on its own is a big block of UI. To collapse it into a field that
opens on click, put it inside a Popover and render the selected date on the
trigger. See the Date Picker page for the
composed version.
Changelog
11-03-2024 day_outside colour
Changed the colour of the day_outside class to the following to improve contrast: