caliper uidocs
DemoSign inGet Pro

Calendar

Free

A month grid for choosing a day or a range, usable on its own or inside a picker.

Installs components/ui/calendar.tsxDepends on lucide-reactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/calendar.json

October 2026

No day selected.

When to use #

Use it for

  • An always-visible date chooser on a booking or planning page.
  • As the building block for date pickers.

Skip it when

  • A date field in a form; use a date picker.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/calendar.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from Calendar, formatISODate, isoDate and parseISODate.

example.tsx
import { useState } from "react"
import { Calendar } from "@/components/ui/calendar"

export function BookingCalendar() {
  const [day, setDay] = useState<string | null>(null);
  return (
    <div className="grid justify-items-center gap-3">
      <Calendar label="Choose a day" selected={day} onSelect={setDay} showToday />
      <p role="status" className="text-sm text-muted-foreground">{day ? `Selected ${day}.` : "No day selected."}</p>
    </div>
  );
}

API reference #

Calendar

component
PropTypeDefaultDescription
labelstring—
yearnumber—
monthnumber—
onMonthChange((year: number, month: number) => void)—
selectedstring | null—
rangeStartstring | null—
rangeEndstring | null—
onSelect((iso: string) => void)—
onHover((iso: string | null) => void)—
minstring—
maxstring—
disabledDates((iso: string) => boolean)—
disabledReason((iso: string) => string | undefined)—Read with an unavailable day, e.g. "banks closed".
marks((iso: string) => string | undefined)—A quiet data mark under the day, e.g. invoices due; the label is read with the date.
showTodaybooleanfalse
classNamestring—

formatISODate

component

No props of its own; it accepts the native props of its root element.

isoDate

component

No props of its own; it accepts the native props of its root element.

parseISODate

component

No props of its own; it accepts the native props of its root element.

Accessibility #

It exposes grid and gridcell semantics, with aria-label, aria-disabled, aria-hidden, aria-live, aria-selected and aria-current kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
→Moves to the next item or value.
←Moves to the previous item or value.
↓Moves to the next item or value.
↑Moves to the previous item or value.
HomeJumps to the first item or the minimum.
EndJumps to the last item or the maximum.
PageDownMoves by a larger step, or to the next page.
PageUpMoves by a larger step, or to the previous page.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.