Week calendar

Pro

A week grid of events that can be selected and moved.

Installs components/ui/week-calendar.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add @caliper/week-calendar

Click an empty hour to add an event, drag one to move it, drag its bottom edge to resize, or focus it and use Alt and the arrow keys.

October 20 – 26, 2025

Mon 20Tue 21Wed 22Thu 23Fri 24Sat 25Sun 26

All day

Team offsite

Planning14:00 – 15:30

Standup09:30 – 09:45

Design review10:00 – 11:00

1:1 with Ravi10:30 – 11:15

Focus time13:00 – 16:00

Customer call11:00 – 12:00

When to use #

Use it for

Showing a schedule by day and hour.
People need to see overlaps.

Skip it when

Picking a single date; use the calendar.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/week-calendar

Adds its 4 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 { WeekCalendar } from "@/components/ui/week-calendar"

The worked example comes with Pro

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

Checking your licence…

API reference #

WeekCalendar

component

PropTypeDefaultDescription

events *readonly CalEvent[]—

onChange *(id: string, start: string, end: string) => void—

onCreate((start: string, end: string) => void)—

weekOf *string—Any date in the week to show.

onWeekChange *(weekOf: string) => void—

nowstring—ISO date-time treated as the current moment, for the now line.

startHournumber7

endHournumber20

classNamestring—

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.