Calendar

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/calendar

UsageCopy Anchor Link

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

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

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

To pick a date from a button or input, put the calendar in a popover. See Date Picker.

RangeCopy Anchor Link

Set mode="range" to select a start and end date. numberOfMonths shows several months side by side.

Month and year dropdownsCopy Anchor Link

Set captionLayout="dropdown" with startMonth and endMonth to jump to a month or year quickly, for example for a date of birth.

Disabled daysCopy Anchor Link

disabled takes a date, a list of dates, or a matcher such as { before: new Date() } or { dayOfWeek: [0, 6] }.

Cell sizeCopy Anchor Link

The --cell-size CSS variable sets the size of each day. Override it with a class:

<Calendar className="[--cell-size:--spacing(11)]" />

API referenceCopy Anchor Link

Calendar is built on DayPicker and accepts all of its props, like selected, onSelect, month, disabled, locale, and numberOfMonths. Columbus changes these defaults: