Calendar

About

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

Installation

pnpm dlx shadcn@latest add https://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.

With 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 Day Picker.  See the React Day Picker documentation for the full API reference.