Clinics and healthcare
Clinic and practice scheduling on a 15-minute grid
A clinic diary is a tight grid of short appointments, each needing the right practitioner, the right room and a few minutes to reset between patients. This page explains how to model that day in SuperScheduler, which rules the timeline enforces while people drag, and which ones your backend must own.
Why a clinic day is harder than it looks
Front desks work in short units. A follow-up takes 15 minutes, a physiotherapy session 30 or 45, an assessment an hour, all on the same quarter-hour grid. The gaps matter as much as the bookings: rooms need resetting between patients, and practitioners need breaks that do not get quietly booked over.
The day also changes constantly. Patients arrive late, cancel or do not come, and an urgent case has to fit without moving three other people. Whoever reschedules needs to see where a practitioner and a room are free at the same time, and the interface must refuse a change that puts two patients in one room.
And this is health data. A shared reception screen should show the minimum needed to run the day; records, rules and audit trails live in the clinic’s systems, not in the browser.
Decisions the front desk makes every day
- 01
Practitioner or room as the row
An appointment needs both, but a timeline row is one resource. Most diaries put practitioners in rows, because that is how patients ask (“the same physio, Tuesday morning”), and treat the room as a constraint the application checks.
- 02
Slot length versus appointment length
The grid is usually 15 minutes while appointment types last 15 to 60. Drags must snap to the grid and resizes must respect the duration of the appointment type.
- 03
Protecting breaks and blocked time
Lunch, admin hours, training and a room closed for maintenance must look unavailable and refuse bookings, rather than rely on anyone’s memory.
- 04
Turnover between patients
Some rooms need five or ten minutes between sessions. Whether that buffer is a visible block or a margin in validation is a clinic decision.
- 05
Late arrivals and no-shows
A late patient shortens a session or pushes the next one; a no-show frees a slot for the waiting list. Both are status changes the diary shows without losing the original booking.
How to model a clinic diary
Treat the timeline as a view of your appointment store: rows are bookable people or rooms, events are appointments, and every rule that matters is checked again on the server.
- Resources
- Use one row per practitioner, grouped by discipline in a resource tree, with row header columns for specialty or default room. If rooms are the scarcer resource, put rooms in rows and keep the practitioner as a field on each appointment.
- Events
- Each appointment is a half-open civil-time interval, for example 09:15:00 to 10:00:00, so a session ending at 10:00 leaves the 10:00 slot free. Carry your backend id, the appointment type and a status, and render only what reception needs.
- Time scale
- Use a 15-minute cell duration with hour headers, and set showNonBusiness to false to hide the hours the clinic is closed. A second zoom level with hourly cells across a week helps when planning a block of follow-ups.
- Rules
- Set allowEventOverlap to false and disable the cells of breaks in onBeforeCellRender. Check room conflicts and turnover in onEventMoving with a message that explains the refusal, and confirm each change with the backend in onEventMove before it commits.
What the library does, what your clinic system does
- A quarter-hour grid with snapping, drag, resize and, in full keyboard mode, keyboard moves
- Refusal of moves onto occupied ranges or disabled cells, with your message in the drag feedback
- Hatched blocked time for breaks, admin hours and closed rooms
- Appointment content rendered through React slots
- An asynchronous veto in onEventMove, so a change can wait for the server
- Patient records, and the decision about which fields reach the screen
- Authoritative double-booking checks in the database
- Roles and permissions: who may move, cancel or book for whom
- Recurring treatment plans, expanded into individual appointments
- Reminders, waiting lists, billing, audit trails and time-zone conversion
Working examples
Common mistakes in clinic diaries
Putting clinical detail in event text
Text, tooltips and bubbles end up in the page and on a screen the waiting room may see. Show initials or a short reference, and load details on demand behind your own access checks.
Leaving no-shows as blocking events
With overlap refused, a no-show still occupies its slot. Remove it from the events you pass in, or allow the overlap in onEventMoving when every event in args.conflicts is cancelled or a no-show.
Treating the end time as inclusive
An appointment from 09:00:00 to 09:30:00 ends at 09:30, and a 09:30 booking does not overlap it. Adding a minute to “close” the interval creates false conflicts all day.
Trusting the browser as the last line of defense
The timeline refuses an overlap it can see, not a booking made a second ago at another desk. The server must reject it and the application must reload.
Questions
Can I stop two appointments from overlapping in the same room?
Yes. With rooms as rows, set allowEventOverlap to false and the timeline refuses moves, resizes and selections onto an occupied range in that row. With practitioners as rows, check room conflicts in onEventMoving and set args.allowed to false with a message. Either way, repeat the check on the server.
How do I show 15-minute appointment slots in a React scheduler?
Use scale “CellDuration” with cellDuration set to 15 and time headers grouped by hour. Drags, resizes and selections snap to the cell by default, and showNonBusiness set to false hides the hours outside businessBeginsHour and businessEndsHour.
Does SuperScheduler handle recurring appointments?
Not as a feature: the recurrence options are reserved and have no effect. Expand a plan of eight weekly sessions into eight appointments in your backend, each with its own id, so one session can move without touching the rest.
Is SuperScheduler HIPAA or GDPR compliant?
Compliance belongs to a whole system, not to a UI component, and the library holds no certification. It runs in the browser and stores or sends nothing on its own; storage, access control, logging and provider agreements are the responsibility of your application and its operators.
See it with synthetic data
The Forma demo reschedules physiotherapy appointments on a minute scale and keeps them out of blocked time. It uses invented practitioners and no patient information.
Working examples