Calendar 21 block design & features
Calendar21 is a front desk day schedule built with Shadcn UI Avatar, Badge, and Button. The header names the location and date and carries status filter chips with counts. Below it, practitioners sit side by side as columns with an avatar, role, and booked share of the day, and appointments are placed on a shared hour scale with a labeled current time line and a shaded lunch break. A side panel shows the selected appointment and a waiting room list for the next hour.
Each appointment moves through booked, arrived, in session, and completed, or can be marked as a no-show, using the actions in the side panel. Appointments that have passed their start time without a check-in are flagged as running late. Dragging an appointment onto another column reassigns it to that practitioner at the hovered quarter hour, and the status chips dim everything outside the chosen status.
The styling is clinical and orderly, with soft status tints, hairline rules, and compact type that keeps a full day readable. Resource columns with live status are a less common calendar pattern and suit any appointment based business. Content-driven: it needs staff photos, client names, services, and times.
On a narrow screen the side panel hides and the staff columns scroll sideways.