Booking & Appointments
Components for appointment scheduling, time slot selection, and availability management. Extracted from real booking and hospital management systems.
Appointment Cards
Confirmed Appointment
Standard appointment with client info
General Consultation
ConsultationApril 18, 2026
10:00 AM · 30 min
Room 204
Marie Dupont
Pending Appointment
Awaiting confirmation
Follow-up Visit
TelehealthApril 20, 2026
2:30 PM · 45 min
Virtual
Jean Martin
Cancelled Appointment
Appointment has been cancelled
Dental Cleaning
DentalApril 15, 2026
9:00 AM · 60 min
Sophie Bernard
Completed Appointment
Past appointment marked complete
Eye Examination
OphthalmologyApril 10, 2026
3:00 PM · 30 min
Clinic B
Pierre Leroy
Time Slot Picker
Morning Slots
Select an available time slot
Select a time(11 available)
Available
Selected
Unavailable
Compact Grid (6 columns)
Dense layout for many options
Available times(11 available)
Available
Selected
Unavailable
Availability Grid
Weekly Availability
Click or drag to set your available hours
| Mon | Tue | Wed | Thu | Fri | Sat | Sun | |
|---|---|---|---|---|---|---|---|
| 08:00 | |||||||
| 09:00 | |||||||
| 10:00 | |||||||
| 11:00 | |||||||
| 12:00 | |||||||
| 13:00 | |||||||
| 14:00 | |||||||
| 15:00 | |||||||
| 16:00 | |||||||
| 17:00 |
Available
Selected
Unavailable
Click or drag to selectRead-only View
Display practitioner availability
| Mon | Tue | Wed | Thu | Fri | Sat | Sun | |
|---|---|---|---|---|---|---|---|
| 08:00 | |||||||
| 09:00 | |||||||
| 10:00 | |||||||
| 11:00 | |||||||
| 12:00 | |||||||
| 13:00 | |||||||
| 14:00 | |||||||
| 15:00 | |||||||
| 16:00 | |||||||
| 17:00 |
Available
Selected
Unavailable