Availability Scheduler

Weekly booking hours with split ranges, copy to other days, date overrides and a live preview of bookable slots, built from Another UI primitives.

Monday

900AM

500PM

Tuesday

900AM

500PM

Wednesday

900AM

1200PM

100PM

500PM

Thursday

900AM

500PM

Friday

900AM

500PM

Saturday

Unavailable

Sunday

Unavailable

Preview

30 minute meetings

16 slots on Monday

9:00 AM9:30 AM10:00 AM10:30 AM11:00 AM11:30 AM12:00 PM12:30 PM1:00 PM1:30 PM2:00 PM2:30 PM3:00 PM3:30 PM4:00 PM4:30 PM

Date overrides

Mon, Oct 12, 2026

Unavailable, Thanksgiving

Fri, Oct 23, 2026

1:00 PM to 4:00 PM, team offsite morning

All changes saved

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/availability-scheduler.json

Features

Weekly hours. One row per day with a switch for available or not. Each day holds as many time ranges as you need, typed with Time Field in 15 minute steps.
Split days. Add a range with the plus button, remove one with the destructive X. Removing the last range turns the day off.
Copy to other days. The copy menu lists the other days with checkboxes and applies the hours to all of them at once.
Checks as you type. A range that ends before it starts, or overlaps another range on the same day, turns red, shakes and says why. Save stays off until it is fixed.
One toolbar. Time zone, meeting length and date overrides sit in a single row that scrolls sideways on phones instead of wrapping.
Date overrides. Pick one or more dates on a calendar and mark them unavailable or give them custom hours. They list below the week, each with a remove button.
Live preview. Pick a day to see every bookable slot for the current meeting length. It sits beside the week on wide screens and below it on phones.
Save and reset. A dot shows unsaved changes. Reset goes back to the last save, and Save plays Cuelume's success sound.
Motion and sound. New ranges, overrides and preview slots enter with the transitions.dev swap in. Switches, toggles, menus and the dialog use the sounds the primitives already play.

Usage

import {
  AvailabilityScheduler,
  type Availability,
} from "@/components/blocks/availability-scheduler"
 
const hours: Availability = {
  timezone: "America/Vancouver",
  meetingLength: 30,
  week: [
    { on: true, ranges: [{ id: "mon", start: "09:00", end: "17:00" }] },
    // Tuesday to Sunday, Monday first
  ],
  overrides: [{ id: "holiday", date: "2026-12-25", ranges: null }],
}
 
<AvailabilityScheduler defaultValue={hours} onSave={(value) => save(value)} />

Props

defaultValue. The starting Availability. Times are 24 hour "HH:mm" strings, the week starts on Monday, and an override with ranges: null means unavailable that day.
onSave. Called with the whole schedule when Save is pressed.
className. Added to the outer element.

Helpers

slotsFor(ranges, length). The start times of every bookable slot of length minutes, skipping invalid ranges. Use it to build the booking page itself.
rangeProblems(ranges). A map of range id to a message for ranges that are inverted or overlap.
formatTime(time). Turns "13:30" into "1:30 PM".