Availability rule editor

A React component in Beamline's Form controls category.

When someone (or something) can be booked: hours for each day of the week, one or more ranges a day, a day turned off, a day's hours copied to the others in one step, the time zone they are in, and exceptions for particular dates (a holiday off, a Saturday on). A week strip draws the hours at a glance, a sentence says them back, and overlapping or reversed ranges are said in words where they are.

Use it for

• Booking and scheduling products: a person's or a team's bookable hours, a clinic's opening hours, a support desk's coverage, a venue's hours.
• Any weekly hours with exceptions for given dates.

Not for

• How an event repeats (recurrence-editor).
• Picking one date or time (date-picker, time-picker).
• Showing booked events on a calendar (calendar).

Anatomy

• summary: the hours in one sentence ('Mon–Fri 9:00 AM–5:00 PM, Sat 10:00 AM–2:00 PM'), and the time zone
• week strip: seven rows across 24 hours, each day's ranges as bars, now marked on today's row
• day row: the day's switch (Unavailable when off), its ranges as start and end time fields, remove a range, add a range after the last, and Copy to (weekdays, every day, a chosen day)
• a problem under the range that has it: 'Ends before it starts', 'Overlaps 11:00 AM–1:00 PM'
• time zone: a select of zones, the person's own first
• exceptions: dates with their own hours or Unavailable, added with a date field, removed one by one, past ones dropped

Variants

• format: 12h, 24h

States

• available
• unavailable (day off)
• several ranges
• overlapping (said)
• reversed (said)
• exception
• disabled

Keyboard

• Every control is the system's own and a Tab stop in reading order: a day's switch, its time fields, Remove, Add, Copy to
• Time fields step with ↑ ↓ by the minute step; Copy to is a menu

Motion

A range added grows in and one removed folds while the rows below close up (useFlip); turning a day off folds its ranges into the word Unavailable; the week strip's bars ease to their new length and place as times change; a problem grows in under its range. Reduced motion: changes are instant.

Props

Built from

• switch
• time-picker
• button
• dropdown-menu
• select
• date-picker

Dependencies

lucide-react

Import

import { AvailabilityRuleEditor, DEFAULT_AVAILABILITY } from "@/components/availability-rule-editor/availability-rule-editor";

Get it

Availability rule editor is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent

More in Form controls

• Color Palette: A wheel of preset colours to pick from: twelve hues around the ring, their tints inward, white at the middle; the chosen swatch lifts and carries a check.
• Rich text editor: A Notion-grade writing surface: slash menu for every block, a formatting toolbar on selection, drag-to-move blocks, nesting, markdown shortcuts, paste…
• Allocation editor: Parts of a fixed whole edited as transfers: an ordered strip whose boundaries drag or step between neighbours and a roster of exact amounts where typing…
• Radio cards: One choice among rich options as cards with optional media, icon, detail and a figure; one selection ring follows the stable choice.
• Calendar: Month grids for picking a day or a range: a real grid with arrows by day and week, Page keys by month, closed days, today's dot, and a range span that…
• Recurrence editor: How something repeats, set in plain controls and said back in a sentence: every N days, weeks, months or years; which weekdays; in a month, on a date or…
• Signature pad: A pad for a drawn signature whose ink follows a stylus's pressure (and thins with speed under a mouse or finger); undo, replay, PNG or SVG export, and…
• Image cropper: Frame a picture before it is saved: a fixed window (square, round for avatars, wide for covers, or free with handles) over the picture, which you drag…
• Input Dissolve: A one-line field whose text breaks into specks and drifts off once it is sent, last letter first; the field is empty and ready again.
• Password field: A password field with a reveal control, and a strength meter when a password is being created.
• Card field: A payment card in one field: the number groups as it is typed and names its network, the expiry and security code follow on their own as each part…
• File drop zone: A generous target for files: drop or choose, each checked against type, size and count with the reason when turned away; uploads show progress and can be…
• Slider: A value or range on a known scale: the thumb grows under the finger and shows its value while dragged or focused; marks, end icons and a value readout.
• Rating: A score on a small scale: stars that fill as you point (halves too) and light one after another when chosen, with the word for the score beside them…
• Date range picker: A reporting range: presets on one side and two months on the other (one on a phone); the trigger names the preset in use, and the footer counts the days.
• OTP input: A verification code in separate boxes backed by one real field, so paste, SMS autofill and Backspace work; optional groups like 123–456.
• Segmented control: Two to five views or ranges of the same content (1D / 1W / 1M, List / Board): a radio group whose raised thumb slides to the choice.
• Colour picker: A swatch that opens a picker: saturation-brightness plane, hue strip, HEX/RGB/HSL/OKLCH value to type or copy, the screen eyedropper where available…
• Chip group: Quick filters as chips: a chosen chip fills and grows a check, counts show what each would return, and extra chips fold behind “+N”.
• Shortcut recorder: Lets people set their own shortcut: press the keys, see them as keycaps; a clash or a browser-kept shortcut asks first. ShortcutCheatsheet lists every…
• Mention input: A composer where @people and #channels become single tokens with suggestions at the caret; the value keeps the text and where each mention sits.
• Tag input: Short free-form values as tags: Enter, comma or Tab adds, a pasted list adds them all, Backspace twice removes the last; duplicates and invalid values…
• Multi-select: Several values from a known list as removable chips in the field; the list has a search field (for long lists), checkable rows and a count with Clear.
• Tree select: A field that picks from a tree: departments and teams, categories and subcategories, folders, regions and cities; the list opens as an indented tree…
• Combobox: One value from a long list found by typing (time zones, countries, customers): ranked matches with the match emphasised, keywords, optional group…
• Phone input: A phone number with its country: searchable picker with country and dialling codes, “+44…” switches the country, the number groups as typed, and the…
• Date picker: One date in a form: a field that opens the month grid under it with focus inside, picks and closes; Today and Clear below, optional clear button.
• Time picker: A time of day as hour and minute segments, typed or stepped, 12- or 24-hour; the clock opens a list of times at the step.
• Number field: A bounded number with − and +: arrows and Page keys step, typing is read in the locale and clamped on leaving, limits can be explained, and the label can…
• Inline edit: Text that becomes a field in the same place: Enter (or ⌘Enter when multiline) saves, Escape cancels, leaving saves; saving shows progress and a refusal…
• Search field: The search entry point: magnifier, clear button, Escape to clear, a shortcut hint and an optional live border beam.
• Switch: A setting that applies at once: a thumb that slides on a spring and stretches under the finger, with an optional label before or after.
• Form: Validation wiring for react-hook-form (and zod) on the system's own fields: each field already links its label, help and error, so FormField hands over…
• Select: One choice from a short known list, in the same frame as every text field: label, help, error, option groups and details.
• Toggle group: Pressable toggles where one or several can be on: alignment, bold and italic, view options; bare for toolbars or framed.
• Input: A single-line text field with its label, help and error wired for assistive tech, three sizes and adornments.
• Checkbox: A yes/no choice with an optional label and help, including the mixed state for select-all; the check draws itself in.
• Radio group: One choice from a short visible set, each option with an optional description, vertical or in a row.
• Textarea: Multi-line plain text that grows with what is typed up to a limit, with an optional character count.
• Label: The text label tied to a form control, with a required marker that screen readers announce.