Calendar

About

The Calendar component is built on top of React DayPicker, a flexible date picker library for React.

Installation

pnpm dlx shadcn@latest add https://dev.designsystem.wfp.org/r/calendar.json

Usage

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

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

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-md border"
/>;

Examples

Date range

Use the mode="range" prop to allow users to select a date range.

Multiple dates

Use the mode="multiple" prop to allow users to select multiple dates.

Dropdown

Use captionLayout="dropdown" to display month and year as dropdown menus.

Disabled dates

Use the disabled prop to disable specific dates or date ranges. You can disable weekends, specific dates, or date ranges.

API reference

This component is built on top of React DayPicker. See the React DayPicker documentation for the full API reference.

Changelog

• 6 July 2026: replaced outdated "table" class name with "month_grid"