shadcn.io is not affiliated with official shadcn/ui
Appointment Scheduler CRUD Block for Radix UI
A physio clinic's day sheet: a five-day strip over an agenda with its free gaps, a length picker that finds the next free slot and books it for a client, a reschedule dialog that names a clash, and Cancel with Undo.
Installation
Overview
Run a clinic's day sheet from one panel, with this appointment scheduler for React with Radix UI. A hairline frame with a plus mark on each corner opens with a Toggle Group of five working days, each with its count of visits, over an agenda from 09:00 to 17:00 in a frame of fixed height. Booked visits and the free gaps between them share the list, so the day reads as it is. Below the agenda a length picker of 30, 45 or 60 minutes and Find next free slot propose the first gap that fits, starting from the chosen day and never in the past; a client name and a treatment complete the booking, and the Shine Button says "Book 11:15 for 45 minutes". Edit opens a Dialog to change the client, treatment, day, start or length, and a clash is named ("Overlaps Ludmila Sharpe, 10:30 to 11:15") with nothing saved. Cancel removes a visit, and the foot says what went beside an Undo. The bands are ruled by Guides, and an Empty state shows when a day has no visits. For clinics, salons, tutors and any one-person calendar of timed visits.
FAQ
How do I fill it with my days and visits?
Edit DAYS for the five days, START_LINES for the visits (client, treatment, day index, start and minutes) and TREATMENTS for the list in the menus. Opening and closing times are OPEN and CLOSE in minutes, and NOW is the clinic clock on the first day, so a visit can't be booked or moved to a time that has passed. Nothing reads the clock.
How does Find next free slot choose?
It walks the days from the one you picked and the starts on the quarter hour, and takes the first start where the visit fits before closing and runs into nothing. The proposal is written in words ("Next free: Wed 14 Oct, 11:15 to 12:00") and held until you book, change the length or pick another day. If no gap is long enough the line says so.
What does a clash look like?
Booking and Edit use the same check. A visit that overlaps another names it with its times, one that would end after 17:00 says when it would end, and a start that has already passed says what the clock reads. The Edit dialog stays open and the foot repeats the reason, so a screen reader hears it once in each place.
What does Undo bring back?
The last change: a booking, a move or a cancelled visit. It restores the whole day sheet as it was and returns focus to the agenda. Each new change replaces it, so it never reaches further back than what you just did.