Go to...

Choose a page to open.

A month grid for picking a date or a date range.

Calendar

calendar-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/calendar.json

Usage

import { Calendar } from "@/components/ui/calendar";
const [date, setDate] = React.useState<Date | undefined>(new Date());

<Calendar mode="single" selected={date} onSelect={setDate} />

Calendar wraps React DayPicker and accepts its props.

Examples

Range

calendar-range