Skip to content

Calendar

A month grid. Arrows move between days, PageUp and PageDown change the month. Days are 44px tall and share the row's width.

Sourcecomponents/calendar.tsx

One day

October 2026

A range

October 2026

Usage

Calendar usage
import { useState } from "react";import type { DateRange } from "react-day-picker";import { Calendar } from "@/components/calendar";
export function CalendarUsage() {  const [range, setRange] = useState<DateRange | undefined>();  return <Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />;}

When to use

Use when

A visible month to pick a day or a range: booking pages, schedules. captionLayout="dropdown" for dates far away

Don’t use when

A date field in a form (use Date Picker)