AvailabilityEditor
Set the hours you work each weekday, and the dates that are different.
SourcePackage @weft-js/warp
Preview
tsx
import { AvailabilityEditor } from '@weft-js/warp'import type { Availability } from '@weft-js/warp'export function OnCall() { return ( <AvailabilityEditor defaultValue={ON_CALL_HOURS} zoneLabel="Stockholm (CET)" today={TODAY} locale="en-GB" onSave={() => pause(600)} /> )}const TODAY = '2026-11-03'const ON_CALL_HOURS: Availability = { week: [1, 2, 3, 4, 5, 6, 0].map(day => ({ day, on: day > 0 && day < 6, ranges: day === 5 ? [[540, 840]] : [[540, 1020]] })), overrides: [{ id: 'o1', date: '2026-12-24', ranges: null, note: 'Christmas Eve' }, { id: 'o2', date: '2026-11-13', ranges: [[540, 780]], note: 'Half day' }],}const pause = (ms: number) => new Promise(done => { setTimeout(done, ms) })Installation
npm install @weft-js/warpUsage
tsx
import { AvailabilityEditor } from '@weft-js/warp'<AvailabilityEditor defaultValue={ON_CALL_HOURS} zoneLabel="Stockholm (CET)" today={TODAY} locale="en-GB" onSave={() => pause(600)} />Accessibility
- A failed Save puts focus on the first invalid time.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | Availability | — | The week and the date overrides. |
zoneLabel | string | — | Such as "Stockholm (CET)". |
today | string | — | Pins today's date, for server rendering and tests. The browser's clock otherwise. |
locale | string | — | The language and region used to format values. |
from | number | — | The first time on offer, in minutes. |
to | number | — | The last time on offer, in minutes. |
step | number | — | Minutes between times. |
| Event | Type | Default | Description |
|---|---|---|---|
onSave | (v: Availability) => void | Promise<unknown> | — | Rejecting says so and keeps the changes. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="availability"] [data-part="range"]
rangeinputweekeyebrowoverrides