Calendar
A date field component that allows users to enter and edit dates.
Installation
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/calendar.jsonUsage
Use the calendar for single dates, ranges, and multi-month layouts. Built on react-day-picker.
import { Calendar } from "@/components/calendar/calendar";
import * as React from "react";
function Example() {
const [date, setDate] = React.useState<Date | undefined>(new Date());
return (
<Calendar
mode="single"
selected={date}
onSelect={setDate}
className="rounded-lg border"
/>
);
}Supports react-day-picker modes (single, multiple, range), captionLayout (label,
dropdown, dropdown-months, dropdown-years), numberOfMonths, and showWeekNumber.