AvailabilityEditor
Set the hours you work each weekday, and the dates that are different.
SourcePackage @kerf-js/veneer
Preview
tsx
import { AvailabilityEditor } from '@kerf-js/veneer'import type { Availability } from '@kerf-js/veneer'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 @kerf-js/veneerUsage
tsx
import { AvailabilityEditor } from '@kerf-js/veneer'<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. |