dotUI

Calendar

A calendar allows a user to select a single date value.

<Calendar aria-label="Appointment date" />

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/calendar

Use calendars to allow users to select a single date value.

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

<Calendar aria-label="Date" />

Missing description.

Supports all header attributes.

A calendar grid displays a single grid of days within a calendar or range calendar which can be keyboard navigated and selected by the user.

Prop	Type	Default
	`union`	`—`
	`"narrow" \| "short" \| "long"`	`"narrow"`
	`DOMRenderFunction<"table", undefined>`	`—`

A calendar cell displays a date cell within a calendar grid which can be selected by the user.

Prop	Type	Default
	`"primary" \| "accent"`	`'accent'`
	`CalendarDate`	`—`
	`ReactNode \| function`	`—`
	`DOMRenderFunction<"div", CalendarCellRenderProps>`	`—`