Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProDuration chips that rebuild the start times for a day, hiding any start that would overlap an existing booking or run past closing time. Use this when different services take different lengths of time and only starts that fit should be offered.
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.
Use it when different services take different lengths of time and only starts that fit should be offered.
Do not use it when every visit has the same length; use appointment-booker.
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.
| Prop | Type | Default | Description |
|---|---|---|---|
| durations | number[] | [15, 30, 45, 60, 90] | Minutes offered. |
| busy | { start: string; end: string }[] | [] | Existing bookings on the day. |
| opens / closes | string | 09:00 / 17:00 | Working hours. |
| stepMinutes | number | 15 | Distance between start times. |
| onValueChange | (choice: { start; end; minutes } | null) => void | - | Called with a start and the computed end. |
The pattern ships with a Testing Library test (appointment-duration-selector.test.tsx) that covers starts that fit, starts that overlap, the closing time and clearing a start that no longer fits.