shadcn.io is not affiliated with official shadcn/ui
Doctor Appointments Calendar Block for Vue
Book a clinic appointment by clinician or by soonest opening across them all, with a specialty filter, five days of time chips and a receipt with a reference.
Installation
Overview
Help patients find the first appointment that suits them, with this doctor appointments calendar for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a toolbar and two panes. A Toggle Group switches between By doctor and Soonest, and a Native Select narrows both to one specialty. The rail at the start lists the six clinicians, each with initials in an Avatar, their specialty and the next opening worked out from the block's fixed "now" (14 October, 10:30 clinic time, UTC+1); under Soonest it lists the six earliest openings across everyone in that specialty instead. The pane at the end shows the chosen clinician's openings over five days as time chips, and one clinician has none, which reads as an Empty state at the same height. Choosing a time fills the foot, and the Shine Button Book turns it into a receipt with a reference and Undo. On a phone the list and the openings are two panes with a Back button. The names are fictional, the times are examples and nothing is medical advice. It's built from Toggle Group, Native Select, Avatar, Empty, Button, Shine Button and Guides, with a CSS entrance only. For clinics, salons, advisers and any service with several people to choose from.
FAQ
How do I fill it with my clinicians and openings?
Edit DOCTORS and OPENING_LINES. Each line is a clinician id, a day and the start times for that day (ha|2026-10-15|09:40,11:20). Openings that are earlier than AS_OF are dropped, the next opening shown in the rail is the earliest remaining one, and Soonest is that same list sorted and cut to six. DAYS sets the five days the detail pane draws.
What does Soonest do?
It merges every clinician's openings into one chronological list, filtered by the specialty you picked. Choosing a row selects both the clinician and the time, and the pane at the end shows that clinician's other days so you can still change your mind.
What happens when a clinician has no openings?
Dr. Rainsford has none in the typed data on purpose. The rail says "No openings soon" and the pane shows an Empty state in the same space the day rows use, so nothing around it moves. Switch to Soonest to see who does have a time.
How does the keyboard and a screen reader get through it?
Every row and chip is a real button. The chosen row is marked aria-current, a chosen time is aria-pressed, and a chip's hidden text adds its date. The polite status line says what changed ("Dr. Hanneke Dorrance. Next Thu 15 Oct, 09:40."). On a phone, choosing a row moves focus to the clinician's name in the second pane, and Back returns to the list.
What stays local, and how do I wire it up?
Everything. Book changes state in the page and shows a reference such as HH-2041 that is only worked out from the position of the time; nothing is booked, sent or stored, and the receipt says so. To make it real, fetch openings per clinician and day from your scheduling API into the same shape, and post the chosen opening from book, using the reference your server returns.