Project periods

A React block (a whole screen) in Beamline's Events & bookings app.

A project's time periods (build, show, teardown) on one time scale, the thing being planned: each period a bar across its days with the crew and gear linked to it riding under it, the billed period in the accent, evenings and nights shaded. A period dragged along the scale, or stepped an hour with the arrows and a day with Shift, moves whole with its crew and gear; an outline keeps where it was until saved, and what follows it is said with whether the billed period moved. The chosen period's facts read as text beside the scale (times, length, crew and gear, on quotes and invoices, its role), each changed on demand; an end before its start opens in place and holds Save back. Periods and roles save together; a save on times someone else changed keeps your changes and says so.

Use it for

Planning an event, a shoot or an install whose build, use and teardown are separate periods, booked and billed differently.
Anywhere moving one period must say what follows it and must not silently move what the client pays for.

Not for

A team's calendar of meetings (team-calendar).
A Gantt of tasks with dependencies (gantt-chart).
Booking the crew themselves (crew-booking).

Anatomy

header: the product's mark, the title, the project and its time zone; the days covered and the billed period's hours
time scale: day heads with 06/12/18 marks, evenings and nights shaded (18:00–06:00), a line at each midnight
a lane per period: its name cell (name, days and times, hours, role in words) and its track: the bar labelled with its hours (the billed bar in the accent), its crew and gear as thin lines under it, an outline where it was until saved
add a period; the shading's key
effect line: what follows the period just moved, and whether the billed period moved
the chosen period beside the scale: its name, role badges, starts, ends and length as text with pencils; crew and gear as chips (changed on demand); on quotes and invoices (a switch, said in words); its role, or the action to give it this period; remove
bar: Changes not saved, Discard, Save

States

periods loaded; a period chosen from its name cell or bar; moved on the scale (outline where it was, what follows said); the billed period moved (said); a fact changed from its pencil
an end before its start (both times open in place with the reason, Save held back)
saving; saved; stale (changes kept, said); refused with the reason
look only: no pencils, bars fixed but choosable, the permission said
loading: shaped skeletons; no periods: an empty state
phone: the name cell sits over its track, the bars drop their labels, the chosen period follows the scale
right to left: the scale mirrors (← moves later)
reduced motion: through the tokens

Keyboard

Tab through each period's name cell and bar: ←/→ an hour, Shift a day; focusing a bar chooses it
In the chosen period: each pencil opens its field, which closes when focus leaves
Save and Discard in the bar

Motion

A dragged bar follows the pointer in whole hours, its crew and gear with it, and the chosen period's times change with it. Nothing runs at rest.

Props

Prop	Type	Default	Description
`projectName` (required)	`string`	—
`timeZone` (required)	`string`	—
`defaultPeriods` (required)	`ProjectPeriod[]`	—
`defaultRoles` (required)	`PeriodRoles`	—
`resources`	`string[]`	—	Crew and gear that can be linked to a period.
`onSave`	`((periods: ProjectPeriod[], roles: PeriodRoles) => Promise<unknown>)`	—	Save the periods and roles together. Reject with an Error named "StaleError" when your record moved on (the changes stay, said), or any Error to say why.
`canEdit`	`boolean`	—
`loading`	`boolean`	—
`product`	`string`	—	Your product's name, shown as its mark.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { ProjectPeriods } from "@beamline/project-periods";

Get it

Project periods is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Project periodsComplete system · $49

A project's time periods (build, show, teardown) on one time scale, the thing being planned.

Moving the build day

Build plans the crew and gear, Show is billed. Drag Build along the scale (or focus it and use ←/→, Shift for a day): its truck, stagehands and rigger ride with it, an outline keeps where it was until you save, and the billed Show doesn't move. Drag Show and the panel says the quote's times change with it. Pick a period to read its times, crew and gear; the pencils change them.

0 × 0full

States

One state at a time: a save on times someone else changed (your changes kept); a teardown that ends before it starts (refused in place); looking without the permission; loading; no periods.