caliper uidocs
DemoSign inGet Pro

Calendar app

Pro

A full calendar: day, week, month and agenda, a month picker and calendar toggles, a now line, and events you create by dragging, move by dragging or with Alt and the arrows, and edit in place.

Installs components/ui/calendar-app.tsxDepends on @radix-ui/react-dialog, @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion shared motion tokens
pnpm dlx shadcn@latest add @caliper/calendar-app
Calendar

11–17 October 2026

All day
Close stand-up09:00–09:30
Ostra security review11:00–12:30 · Meet
Design review10:00–11:00
Kestrel follow-up10:30–11:15
Lunch with Inês13:00–14:00 · Taberna da Rua
Focus: Q4 forecast14:00–17:00
Northwind workshop15:00–16:30 · London office
1:1 Tomás09:30–10:00
Yoga18:00–19:00

Each event can be moved with Alt and the arrow keys, and made longer or shorter with Alt, Shift and Up or Down. Enter opens it.

When to use #

Use it for

  • Scheduling, bookings, team rotas and content calendars.
  • Products where people plan their own time.

Skip it when

  • Choosing one free slot; use the availability scheduler.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/calendar-app

Adds its 16 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { CalendarApp } from "@/components/ui/calendar-app"

The worked example comes with Pro

The 58-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

CalendarApp

component
PropTypeDefaultDescription
events *readonly CalendarAppEvent[]—
calendars *readonly CalendarSource[]—
onEventsChange *(events: CalendarAppEvent[]) => void—
todaystringdayKey(new Date())ISO date treated as today.
nowstring—Local date-time for the now line; defaults to the clock.
defaultViewCalendarView"week"
weekStart0 | 100 starts weeks on Sunday, like the month picker beside it; 1 on Monday.
classNamestring—

Accessibility #

It exposes grid, row, gridcell, status and columnheader semantics, with aria-hidden, aria-label, aria-live, aria-labelledby and aria-describedby kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
↑Moves to the previous item or value.
↓Moves to the next item or value.
←Moves to the previous item or value.
→Moves to the next item or value.
EnterActivates the focused control.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.