On-Call Rotation Builder

ProNew

A pick list for the order of an on-call rotation with a schedule preview that gives each person their week from a start date. Use this when the order people are chosen in decides who is on call when.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

defaultStart

weeks6

locale

Guide and examples

When to use it

Use it for on-call, support and cleaning rotas where fairness depends on a visible order.

Do not use it for shifts with different lengths or swaps (use a calendar scheduler).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`people`	`TransferItem[]`	-	Everyone who can be on call.
`defaultStart`	`string`	`2026-11-02`	Start date of the first shift (yyyy-mm-dd).
`defaultValue`	`string[]`	`[]`	Rotation order.
`weeks`	`number`	`6`	Weeks shown.
`locale`	`string`	`"en-GB"`	Date format.

Accessibility

The preview is a real table with column headers and a label.
Dates are formatted with Intl.DateTimeFormat for the given locale.
The order list keeps the keyboard and announcement behaviour of pick-list.

Testing

The pattern ships with a Testing Library test (on-call-rotation-builder.test.tsx) that covers the rotation maths, the schedule rows, reordering and the start date.

Guide and examples

When to use it

Use it for on-call, support and cleaning rotas where fairness depends on a visible order.

Do not use it for shifts with different lengths or swaps (use a calendar scheduler).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`people`	`TransferItem[]`	-	Everyone who can be on call.
`defaultStart`	`string`	`2026-11-02`	Start date of the first shift (yyyy-mm-dd).
`defaultValue`	`string[]`	`[]`	Rotation order.
`weeks`	`number`	`6`	Weeks shown.
`locale`	`string`	`"en-GB"`	Date format.

Accessibility

The preview is a real table with column headers and a label.
Dates are formatted with Intl.DateTimeFormat for the given locale.
The order list keeps the keyboard and announcement behaviour of pick-list.

Testing

The pattern ships with a Testing Library test (on-call-rotation-builder.test.tsx) that covers the rotation maths, the schedule rows, reordering and the start date.