Itinerary
A React block (a whole screen) in Beamline's Events & bookings app.
A trip's days where every event says who sees it, in words: everyone, only Ana and Ben, or hidden from Leo. The same rules give each traveller their own itinerary: choose a traveller and the events not shared with them are left out and counted per day, a day with nothing for them says so, a day with nothing planned says so. Who sees an event is changed from the event itself (everyone, only some travellers, everyone except some), at least one traveller chosen for the last two; a refused change says why and leaves the sharing as it was. A trip with no travellers yet says sharing waits for them.
Use it for
- A travel agent or a group planning a trip where some events are for some travellers only (a surprise, a work day, a booking detail).
- Any shared schedule whose items have their own audience (an event programme with VIP sessions, a family calendar).
Not for
- Booking flights or stays.
- A week calendar with times laid out on a grid (week-calendar).
Anatomy
- viewers: Everyone (every event, with who sees it) and each traveller with how many events are hidden from them
- days: the day and date; its events (time or All day, title, place, note, who sees it); nothing planned or nothing for this traveller; how many this day aren't shared with them
- sharing popover: the event, Everyone / Only some travellers / Everyone except, the travellers, Save or Cancel, the refusal
States
- no travellers
- main view
- individual view
- hidden event
- empty day
- saving
- save refused
Keyboard
- Tab through the viewers (Enter switches), each event's sharing button (Enter opens), the choices (arrows) and the travellers (Space)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
travellers (required) | Traveller[] | — | |
events (required) | TripEvent[] | — | |
days (required) | string[] | — | The trip's days in order (YYYY-MM-DD), so a day with nothing planned still shows. |
onVisibilityChange | ((eventId: string, visibility: Visibility) => void | Promise<unknown>) | — | Changes who sees one event; a rejection is said and the sharing stays as it was. |
viewer | string | null | — | Whose itinerary is shown: null for everyone's (every event, with who sees it). |
defaultViewer | string | null | — | |
onViewerChange | ((id: string | null) => void) | — | |
className | string | — | Classes on the documented visual root; no override by default. |
style | CSSProperties | — | Inline styles on the documented visual root; no overrides by default. |
ref | Ref<HTMLDivElement> | — | Receives the documented native target or imperative handle; omitted by default. |
Built from
- popover
- radio-cards
- checkbox
- button
Dependencies
lucide-react
Import
import { Itinerary } from "@beamline/itinerary";Get it
Itinerary 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 Events & bookings
- Team calendar: 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…
- Day agenda: One person's days with notes, tasks and calendar events side by side, each kept as what it is. A task's scheduled day, deadline, reminder and repeat are…
- Crew booking: Booking crew for a project: each person with a strip of the project's days, days in the same state joined into one run said once (booked solid, available…
- Resource booking: Booking something shared (a room, a van, a camera kit). Choose what, then either a free hour on a day: a grid of starts the app says are free (a taken…
- Resource rules: Each person's scheduling rules beside their day, the day board leading: role, available (an unavailable day filled in the danger tint and said, a job…
- Desk booking: Desks in an office for the people who book them and the admin who sets how far ahead. Your days over the next weeks: booked with a desk, free to book…
- Linked appointments: A drop-off and a pickup kept as one linked pair on the week's calendar (the shared event calendar, day view on a phone), with the car's stay drawn…
- Waitlist desk: A front desk's waitlist beside the day's book: who is waiting (filters as chips, the queue's count apart from the day's), the day's bookings and the…
- Visitor desk: An office front desk's visitors. Invite a meeting's guests from the calendar: colleagues are shown but never invited, guests without an email are said…
- Issued ticket: One issued event ticket at the door, led by the ticket itself: what it admits to (event and venue), when, the section, seat and who it admits, and its…
- Trip budget: A trip's money against its plan, in the trip's own currency. The budget (set or changed in place; a refused save keeps what was typed), what's spent and…
- Proposal payments: A travel proposal's money from the agent's side to the client's. Pricing: the price rule (markup on supplier cost, a fixed price, or net), what the…
- Project periods: 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…