║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Calendar description: A date field component that enables users to choose and edit a date.

<ComponentPreview name="calendar-demo" className="" description="" />

Installation

<Tabs defaultValue="cli" className="w-full"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <PkgOptions name="calendar" /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<p> <code>calendar.tsx</code> </p> <ComponentSource name="calendar" />

<Step>Add util file</Step>

<p> <code>lib/utils.ts</code> </p>

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

</Steps> </TabsContent> </Tabs>

Usage

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

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

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className="rounded-lg border"
  />
);

Examples

---

<Step>YearOrder</Step>

<ComponentPreview name="calendaryearorder-demo" className="" description="" />

---

<Step>Disabled Days</Step>

<ComponentPreview name="calendardisabledays-demo" className="" description="" />

---

<Step>Single month with range selection</Step>

<ComponentPreview name="calendarrangeselection-demo" className="" description="" />

---

<Step>Multiple month with range selection</Step>

<ComponentPreview name="calendarmultimonrange-demo" className="" description="" />

---

<Step>Multiple months</Step>

<ComponentPreview name="calendarmultimon-demo" className="" description="" />

---

<Step>Date Of Birth Picker</Step>

<ComponentPreview name="calendardobpicker-demo" className="" description="" />

---

<Step>Month and Year Selector</Step>

<ComponentPreview name="calendarmonyearselector-demo" className="" description="" />

---

<Step>Date & Time Picker</Step>

<ComponentPreview name="calendardatetimepicker-demo" className="" description="" />

API Reference

Calendar

A date field component that enables users to choose and edit a date.

Props

<PropsTable rows={[ { prop: "mode", type: "single" | "multiple" | "range", default: "single", description: "Selection mode", }, { prop: "selected", type: "Date | Date[] | {from: Date; to?: Date}", default: "-", description: "Selected date(s) or range", }, { prop: "onSelect", type: "function", default: "-", description: "Called on date select", }, { prop: "numberOfMonths", type: "number", default: 1, description: "Months displayed", }, { prop: "defaultMonth", type: "Date", default: "new Date()", description: "Initial month shown", }, { prop: "showWeekNumber", type: "boolean", default: false, description: "Show week numbers", }, { prop: "weekStartsOn", type: "0 | 1 | ... | 6", default: 0, description: "Week start day", }, { prop: "captionLayout", type: "label" | "dropdown" | "dropdown-months" | "dropdown-years", default: "label", description: "Month/year caption style", }, { prop: "fromYear", type: "number", default: "currentYear-100", description: "Start year for dropdown", }, { prop: "toYear", type: "number", default: "currentYear", description: "End year for dropdown", }, { prop: "disabled", type: "Date[] | function | object", default: "-", description: "Disable dates", }, { prop: "components", type: "object", default: "-", description: "Custom subcomponents", }, { prop: "modifiers", type: "object", default: "-", description: "Custom day modifiers", }, { prop: "animate", type: "boolean", default: false, description: "Enable animation", }, { prop: "footer", type: "ReactNode", default: "-", description: "Footer content", }, ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║