ScheduleDay

One person's day in the Team schedule: their bookings as cards, the gaps free to book and their breaks, in the order of the day. A card shows when it starts and ends, the client, the service and how long, and opens; a gap books straight into itself. Bookings already over read muted. A day not worked shows only its note and any bookings it still holds — its header says it's off.

Playground

10:00–11:00Break

14:00–15:00Break

Tap a gap or a booking

<ScheduleDay
  day={day}
  from={undefined}
  done={undefined}
  onBook={(gap) => openBooking(gap)}
  onOpen={(booking) => openDetails(booking)}
/>

The day

When

API

Prop	Type	Default	Description
day	DayPlan	—	Hours, bookings and free gaps for one date (personSchedule); each gap's need is the minutes the person's quickest service takes there.
from	string	—	HH:mm: nothing free before it is offered — now, on today (on the quarter hour); “24:00” for a day gone by.
done	string	—	HH:mm: bookings over by then read muted — now, on today; “24:00” for a day gone by.
onBook	(gap, anchor) => void	—	Book into a free gap. anchor is the gap's own element, for a FloatingComposer to open on. Without it, gaps are only shown.
onOpen	(booking, anchor) => void	—	Open a booking: its details, a call, Move and Cancel. anchor is the booking's card, for a FloatingComposer to open on.
labels	Partial<ScheduleDayLabels>	English	Free, Break, each gap's Book label, and a booking's length (“45 min”).

Guidelines

Bookings are glass cards with a leaf bar between the times and the client (gray once they're over); free gaps a flat gray wash with no edge, deeper on hover, so they read as room in the day rather than another card; breaks are quiet text.
A gap is offered only where something can be booked: the person's quickest service fits from its first start on the booking grid, with its buffer when a booking follows. Each gap carries that need, so today's trim to now keeps the same rule.