AvailabilityEditor

Code

import { AvailabilityEditor } from "@fadymondy/nasaq/web";<AvailabilityEditor defaultValue={availability} onSave={(value) => api.saveAvailability(value)} />

Bookings · beta

Live examples and controls: AvailabilityEditor in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/availability-editor.json

Where a provider sets when patients can book. The rules (overlaps, end before start, a break outside the hours, overlapping vacations) live in pure functions and appear beside the row. The pure helpers hoursForDate and isOnVacation are what a booking backend can reuse.

When to useCopy Anchor Link

• A doctor or a branch manager sets weekly hours.
• Adding a vacation or a day off.

When not to useCopy Anchor Link

• Booking a single time: use BookingSlots.

ImportCopy Anchor Link

import { AvailabilityEditor } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { AvailabilityEditor } from "@fadymondy/nasaq/web";

<AvailabilityEditor defaultValue={availability} onSave={(value) => api.saveAvailability(value)} />

AnatomyCopy Anchor Link

AvailabilityEditor            data-slot="availability-editor"
├─ weekly card                one section per weekday: Switch, hours, breaks, copy
├─ vacations card             DateRangePicker, reason, list
├─ issues alert               everything that blocks saving
└─ Discard and Save

APICopy Anchor Link

Every div prop is passed through unless noted.

ExamplesCopy Anchor Link

Ask if someone is available

import { hoursForDate } from "@fadymondy/nasaq/web";

const hours = hoursForDate(availability, new Date(2026, 9, 20)); // null on vacation

AccessibilityCopy Anchor Link

• Every switch and time picker has a label with the day. Issues are listed in one alert and next to the row.
• Save is disabled with a reason shown, not silently.

RTL & i18nCopy Anchor Link

• The week starts on Saturday by default and mirrors in Arabic. Times are 24-hour under the hood and shown by the picker.
• Strings live in a STRINGS = { en, ar } object and any of them can be replaced with labels. The locale comes from NasaqProvider.

Styling & tokensCopy Anchor Link

• Colours, radii and type come from --nq-* tokens; nothing is a raw colour. Spacing and alignment use logical classes.
• Target [data-slot="availability-editor"] and the inner data-slot parts shown in the anatomy.

Do / Don'tCopy Anchor Link

• Do keep the async callbacks honest: return { error } so the component can show the message.
• Do pass now in tests and stories so the output stays the same.
• Don't fetch inside the component: it is presentational and takes data and callbacks.
• Don't rely on colour for state: every state also has a word.

RelatedCopy Anchor Link

• clinic-schedule
• booking-slots
• date-picker

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-bookings-availability-editor--docs