Event Calendar

Month, week, day and agenda views with drag, resize and create, in any time zone.

PROGet Event Calendar and 168 other Pro components with pro lifetime — Get Pro

Category: Productivity
Access: ProPro · unlocked
Source: 749 lines · one file
States: 8 drawn
Added: 2 Nov 2026

The decision inside it

Events keep their own time zone, even across a clock change

Moving a 9:00 London call to the day after the clocks change should leave it at 9:00 in London, not 8:00 or 10:00. Moves shift the clock time in the event's own zone, never a fixed number of hours, and an event in another zone shows both times.

When to use it

Use Event Calendar for scheduling: bookings, meetings, shifts or content plans, with drag to move, resize and create. To pick a date in a form use Date Picker; for a year of activity use Calendar Heatmap.

Installation

How you get it

Paste this into Claude Code, Cursor, Codex or any coding agent. It installs the file and uses it as it is, instead of writing a new one.

Use Liro's Event Calendar for this.
Install it: npx shadcn@latest add @liro/event-calendar
(the @liro registry is set up in components.json, with LIRO_KEY in .env.local)
Import it from @/components/ui/event-calendar.
Do not rewrite or restyle it. Pass my data through its props
and keep its built-in states.

For the full brief with every prop and the mistakes assistants usually make, use Copy prompt above. Pro components install through the @liro registry with your CLI token: see the Namespaced tab.

Usage

components/team-calendar.tsx

import { EventCalendar, type CalendarEvent } from "@/components/ui/event-calendar";

export function TeamCalendar({ events, api }: {
  events: CalendarEvent[];
  api: { move: (id: string, start: Date, end: Date) => Promise<void>; create: (start: Date, end: Date) => Promise<void> };
}) {
  return (
    <EventCalendar
      events={events}
      defaultView="week"
      onEventChange={(id, next) => api.move(id, next.start, next.end)}
      onCreate={({ start, end }) => api.create(start, end)}
    />
  );
}

API reference

“Copy prompt” above puts a full brief on your clipboard, install command, dependencies, props, and the mistakes an assistant usually makes with this component.

Props

Read from the component’s own TypeScript interface when the site is built, so this table cannot drift from the file you install.

	Type		Notes
`events`	`CalendarEvent[]`	Yes	–
`view`	`CalendarView`	No	–
`defaultView`	`CalendarView`	No	–
`onViewChange`	`(view: CalendarView) => void`	No	–
`date`	`Date \| number`	No	The day the view shows.
`defaultDate`	`Date \| number`	No	–
`onDateChange`	`(date: Date) => void`	No	–
`timeZone`	`string`	No	The zone the grid is drawn in. Default: the viewer's.
`onEventChange`	`(id: string, next: EventChange) => void \| Promise<void>`	No	Called after a drag or a key move. May return a promise; if it rejects the event goes back.
`onCreate`	`(range: EventChange) => void \| Promise<void>`	No	Called after dragging across empty time. May return a promise.
`onSelect`	`(id: string) => void`	No	–
`scrollToHour`	`number`	No	First hour shown when the week or day view opens. Default 8.
`now`	`Date \| number`	No	Fix the clock, for screenshots and tests.
`look`	`Look`	No	–

Dependencies

npm packages

clsxframer-motionlucide-reacttailwind-merge

Liro foundations, installed alongside it

liro-themebutton

States

All of them are drawn by the component. None is left for you to design.

Week
Month
Day
Agenda
Two time zones
Saving
Move refused
Empty month

Accessibility

Keyboard reachable throughout, in visual order
Focus trapped in overlays, Escape closes them
Focus returns to whatever opened it
Live regions announce what changed, not that something did
Honours prefers-reduced-motion

Responsive behavior

Sizes to its container, not the viewport
Usable from 320px up
Pointer-based interaction, so trackpad and touch both work
No hover-only affordances