Calendar 24 block design & features
Calendar24 is a weekly class timetable built with Shadcn UI Avatar and Button. The header shows the week range, a running count of booked and waitlisted classes, category filter chips, and a segmented time of day filter. On wide screens each day is a column of class cards, and each card lists the time, length, class name, instructor avatar, level, room, a capacity bar, and a booking button.
Booking a class takes a spot and updates the bar, a full class offers a waitlist instead, and pressing again cancels. Classes that have already started today are dimmed and marked finished. The capacity bar shifts color as a class nears full, and combining category chips with the time filter narrows the whole week at once.
The style is friendly and sporty, with rounded cards, a colored edge per category, and plenty of breathing room between days. A timetable of bookable cards is a different shape from an hour grid and reads more like a schedule page than a calendar app. Content-driven: it needs class names, instructors, rooms, and capacities.
Below large screens a day strip with class counts replaces the columns and shows one day at a time.