On-call Schedule
A rotation across a window of days. Shifts are positioned proportionally rather than snapped to a day grid — rotations hand over at 09:00, and rounding shows the wrong person on call for most of two days.
src/components/ui/on-call-schedule.tsxAbout
From the component's own source, where it was written.
An on-call rotation across a window of days.
Shifts are positioned proportionally in the window rather than snapped to a day grid. Rotations hand over at 09:00 on a Tuesday, not at midnight, and a calendar that rounds to whole days shows the wrong person as on call for most of two of them.
Who is on call *now* is stated in words above the timeline. That is the only question this component is ever opened to answer, and making someone read it off a bar chart during an incident is a poor trade.
Install
npx astralyx-ui add on-call-schedule
Usage
import { OnCallSchedule } from '@/components/ui/on-call-schedule'
<OnCallSchedule shifts={shifts} start={weekStart} end={weekEnd} />Composer
Change the props and the source below follows.
<OnCallSchedule shifts={shifts} start={weekStart} end={weekEnd} />Examples
Rotation
<OnCallSchedule shifts={shifts} start={weekStart} end={weekEnd} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
OnCallSchedule
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | 'On call now' | — |
| shifts | Shift[] | required | { id, person, start, end, layer?, color? }. Layers become rows. |
| start | Date | required | The window. Shifts are clipped to it rather than overflowing. |
| end | Date | required | The window. Shifts are clipped to it rather than overflowing. |
| now | Date | — | The only question this is ever opened to answer — reading it off a bar chart during an incident is a poor trade. |
| locale | string | 'en-GB' | — |
| nobodyLabel | ReactNode | 'Nobody' | Shown when no shift covers the current moment. |
| untilLabel | ReactNode | 'until' | Precedes the shift's end time. |
Types
Shift
An on-call rotation across a window of days.
| Field | Type | Description |
|---|---|---|
| id | string | — |
| person | string | — |
| start | Date | — |
| end | Date | — |
| layer? | string | e.g. "Primary", "Secondary" |
| color? | string | — |