Pro Components
Base Components
Appointment Calendar
Full-month appointments calendar with admission, in-patient, and discharge markers, a selected-day summary, and responsive desktop/mobile grids.
Example
Appointments Calendar
May 2026
Selected day
Saturday, May 9
2 occupancy touches
Admissions0
In-Patient1
Discharges1
Total2
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Introduction
Calendar Appointment includes:- Header: Title, current month label, and Today / Prev / Next month controls.
- Selected day summary: Live region with the selected date, total occupancy, and per-category counts.
- Month grid: Responsive 7×6 calendar — desktop cells show inline metric rows, mobile cells show compact dot markers.
- Category markers: Solid dot for Admissions, ring for In-Patient, dash for Discharges.
- Day cells: Click any day to select it; selecting a day in another month auto-navigates the visible month.
Usage
import CalendarAppointment from "@/components/ui/calendar-appointment";
<CalendarAppointment />;ARRIVALS, IN_HOUSE, and DEPARTURES seed arrays (or the remapBookingsForVisibleMonth helper) with data fetched for the visible month, and rename the category labels in CALENDAR_CATEGORY_META if your domain uses different terminology (e.g. Check-in / Stay / Check-out).
The exported helpers buildCalendarDaySummaries, getCalendarCountsByDate, and resolveDefaultCalendarSelectedDate (plus the CalendarDaySummary and CalendarBooking types) can be reused if you want to drive the same grid from your own data layer.