# AvailabilityEditor > Weekly hours per day with breaks, copy to other days, and vacations picked as date ranges, with overlap and range checks that block saving. Source: https://docs.nasaqui.com/components/availability-editor ## Install ```bash 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 use - A doctor or a branch manager sets weekly hours. - Adding a vacation or a day off. ## When not to use - Booking a single time: use BookingSlots. ## Import ```tsx import { AvailabilityEditor } from "@fadymondy/nasaq/web"; // inside this monorepo: "@nasaq/web" ``` ## Quick start ```tsx import { AvailabilityEditor } from "@fadymondy/nasaq/web"; api.saveAvailability(value)} /> ``` ## Anatomy ``` 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 ``` ## API Every `div` prop is passed through unless noted. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `value, defaultValue, onValueChange` | `Availability` | | The weekly hours and vacations. | | `onSave` | `(value) => Promise` | | Save. Disabled while there are issues or no change. | | `weekStartsOn` | `number` | `6` | First day of the week, 0 is Sunday. | | `minuteStep` | `number` | `15` | Minutes between choices in the time pickers. | | `labels` | `Partial` | | Override any string. | ## Examples **Ask if someone is available** ```tsx import { hoursForDate } from "@fadymondy/nasaq/web"; const hours = hoursForDate(availability, new Date(2026, 9, 20)); // null on vacation ``` ## Accessibility - 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 & i18n - 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 & tokens - 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't - 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. ## Related - [`clinic-schedule`](https://docs.nasaqui.com/components/clinic-schedule) - [`booking-slots`](https://docs.nasaqui.com/components/booking-slots) - [`date-picker`](https://docs.nasaqui.com/components/date-picker) ## Lab https://docs.nasaqui.com/?path=/docs/components-bookings-availability-editor--docs ## Code ### React ```tsx import { AvailabilityEditor } from "@fadymondy/nasaq/web"; api.saveAvailability(value)} /> ``` ### shadcn ```tsx import { AvailabilityEditor } from "@/components/ui/availability-editor"; api.saveAvailability(value)} /> ``` ### Vue ```vue ``` ### Blade ```blade @php $weekly = array_map( fn ($d) => ['enabled' => in_array($d, [0, 1, 2, 3, 4], true), 'ranges' => [['start' => '09:00', 'end' => '17:00']], 'breaks' => [['start' => '13:00', 'end' => '14:00']]], range(0, 6), ); $availability = ['weekly' => $weekly, 'vacations' => [['id' => 'v1', 'from' => '2026-10-04', 'to' => '2026-10-06', 'reason' => 'Conference']]]; @endphp ``` ### HTML + Alpine ```html

Weekly hours

The hours patients can book. Breaks are taken out of them.

Vacations and days off

No one can book these days.

No vacations planned.

```