Volunteer rota
A React block (a whole screen) in Beamline's Education app.
Several plans side by side for the people who staff them: plans as columns, teams and their positions as rows, each cell the people scheduled with their answer (confirmed, asked, declined) and what is still needed by your rule. Following one person rings every place they are scheduled and says when they are on one plan more than once. A plan or the template added for this look is marked as not saved and removed without touching the saved view or any plan; nothing here sends a request. The person followed, where they are and a plan to add sit in one line above the rota; the key and the saved view under it. On a phone each plan is its own card with its positions, nothing scrolls sideways.
Use it for
- Staffing a run of services or events with volunteers: a church's Sundays, a food bank's shifts by role, a festival's crews by day.
- Seeing one person's load across several plans, or what each team still needs, before asking anyone.
Not for
- People over a week's hours (team-calendar).
- Editing one plan's order of items (run-of-show).
- Permissions by role (roles-permissions).
Anatomy
- header: the product's mark and the title
- toolbar: Follow a person (combobox, clearable), Add a plan to this view (select), the answers' key, who is followed and where (twice said in the warning tone), the saved view's plans and any shown for now
- matrix: a sticky column of positions under their team, a sticky row of plans (day, time and title; Template; This view only with Remove), each cell the people with their answer's mark (declined struck) and what is still needed, or Nobody scheduled
States
- multiple plans
- template column
- needed position
- unconfirmed (asked) assignment
- confirmed assignment
- declined, struck
- target highlighted (ringed in the accent) and twice on one plan said
- temporary plan added (dashed edge) and removed
- saved matrix unchanged
- empty role visible
- loading, no plans
- phone: the matrix scrolls under its sticky positions and plans
- right to left: the columns mirror
- reduced motion: nothing moves
Keyboard
- Tab through the follow field, the add select and each temporary plan's Remove
- The matrix is a table: screen readers read each person with their answer
Motion
None: the rota is read, and changes of the view are immediate.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
plans (required) | RotaPlan[] | — | Every plan the view can show (the saved ones and those you can add for now). |
teams (required) | RotaTeam[] | — | |
people (required) | RotaPerson[] | — | |
cells (required) | RotaCell[] | — | |
savedPlanIds (required) | string[] | — | The saved view's plans, in order. Changing the view here never edits a plan. |
temporaryPlanIds | string[] | — | Plans added for this look only: shown as such, never saved. Controlled with onTemporaryChange. |
defaultTemporaryPlanIds | string[] | — | |
onTemporaryChange | ((ids: string[]) => void) | — | |
target | string | null | — | The person followed across the plans: every place they are scheduled is lit. |
defaultTarget | string | null | — | |
onTargetChange | ((personId: string | null) => void) | — | |
timeZone | string | — | Time zone the plans' times are said in. |
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
- Avatar
- Bottom sheet
- Button
- Combobox
- Empty state
- Glow
- Kbd
- Label
- Number field
- Search field
- Segmented control
- Select
- Skeleton
- Spinner
- Text morph
- Tooltip
Dependencies
lucide-react
Import
import { VolunteerRota } from "@beamline/volunteer-rota";Get it
Volunteer rota 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
More in Education
- Course builder: Setting a course up. The learning path as ordered sets, each with its release rule in place (at once, a delay after the set before drawn as a bar you…
- Program modules: A wellness or coaching program's modules as a practitioner builds them. The modules down the side with where each stands (draft, published at a revision…
- Question builder: Questions built beside their material. A reading passage (imported, with an import pending or failed said with Try again, or pasted) whose words become…
- Grading desk: Grading a quiz or an assignment. The submissions down the side, not graded first, the open one beside its grade. A quiz attempt shows each question's…
- Course dashboard: A course's staff view: its identity (draft or published, who may join, how it runs, its lessons) with Publish through your app, Preview as a learner and…
- Course home: A learner's course, week by week, in the cohort's time zone: each lesson done or not, a project's draft or submission, a reflection answered or not, a…
- Gift desk: A gift or tickets taken in person, on a phone at an event or at a desk: the gift entered large in its currency, once or monthly (monthly said as an…
- Gift batches: Gift batches between counting and the books: batches a counting team enters, each with the day the gifts were received (apart from when they were entered…