Team calendar

A React block (a whole screen) in Beamline's Blocks category.

A team's schedule: the people and shared calendars to show (each its colour), a month to jump by, who is out this week, and the week, day or month of events — drag to move or resize, drag across empty time to schedule, an event opened with its details and Cancel; every change optimistic and refused with the reason.

Use it for

A team's shared schedule: meetings, on-call, interviews, time off — see who is free, move a meeting, book a new one.

Not for

Picking one date or a range in a form (date-picker, date-range-picker).
Tasks by stage (project-board).

Anatomy

app shell (your navigation, team mark), New event in the top bar
side panel (a sheet behind Calendars in a narrow room): a month to jump to any day, the calendars to show with their colours and counts, who is out this week
the schedule: week by default, day or month; events side by side when they overlap, a line at now
new event dialog: title, calendar, date, start and end, location; from a dragged slot it opens filled in
event sheet: when, where, which calendar, status; Cancel event asks in place

States

loading (skeleton events; the grid keeps its place)
failed to load (the error with Try again)
nothing in the range (the grid's quiet note)
a calendar hidden (its events leave the grid; its count stays)
a move or resize refused by the rules before it is sent (outside working hours, read-only) — the calendar's own status line says why
a change, a new event or a cancellation saving, refused by your API (put back; the reason above the schedule with Try again)
tentative (dashed) and cancelled (struck through)

Keyboard

the calendar's own: arrows between events, Space grabs and walks one, Enter opens it
the side month: arrows by day and week, Enter jumps the schedule there
dialogs trap focus and return it

Motion

An event follows the pointer while dragged and settles snapped; a hidden calendar's events fade out; a new event grows in where it was drawn. Reduced motion: places at once.

Props

Prop	Type	Default	Description
`events / defaultEvents / onEventsChange`	`CalendarEvent[]`	—
`calendars` (required)	`{ id: string; label: string; color?: string; person?: boolean }[]`	—
`onChange`	`(change: { id: string; start: Date; end: Date; kind: "move" \| "resize" }) => Promise<void> \| void`	—
`onCreate`	`(draft: Omit<CalendarEvent, "id">) => Promise<CalendarEvent \| void> \| void`	—	Shows New event and drawing on empty time.
`onCancel`	`(id: string) => Promise<void> \| void`	—
`canChange`	`(event, next) => true \| string`	—	Rules checked before a move is sent.
`outOfOffice`	`{ name: string; from: Date; to: Date; reason?: string }[]`	—
`loading / error / onRetry`	`boolean / Error \| null / () => void`	—
`team`	`string`	`"Northline"`
`nav`	`AppShellNavGroup[]`	—
`className / style / ref`	`string / CSSProperties / Ref<HTMLDivElement>`	—

Built from

app-shell
event-calendar
calendar
checkbox
avatar
badge
button
dialog
input
select
date-picker
time-picker
sheet
confirm-morph
alert

Dependencies

lucide-react

Import

import { TeamCalendar } from "@/blocks/team-calendar/team-calendar";

Get it

Team calendar is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent