dotUI

Calendar

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

Overview

Examples

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

npm

pnpm

yarn

bun

pnpm dlx 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.

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