shadcn.io is not affiliated with official shadcn/ui
Gym Sessions Calendar Block for React Aria
A week strip over the chosen day's four classes with the trainer's initials and how full each is, a three-class weekly allowance that refuses a fourth booking, and a waitlist for full classes.
Installation
Overview
Book classes against a weekly allowance with this gym sessions calendar for React with React Aria. A hairline frame with a plus mark on each corner opens with a strip of seven day buttons, Monday 12 to Sunday 18 October, each showing how many classes it has and a dot when one of them is yours. The chosen day lists four classes with the time, the name, the trainer's initials in an Avatar and a Progress bar of how full it is ("6 left"). Your plan allows three classes a week: a booking past that is refused and the status line says so, a full class offers "Join the waitlist (2nd)", and cancelling frees the place at once. Classes that have started, measured against the fixed "now", Wednesday 14 October 09:30, show a Badge instead of a button. The bands are ruled by Guides. For gyms, studios, clubs and any timetable with a limit per member.
FAQ
How do I change the timetable?
Edit LINES: each line is a day, a start time, a class name, the trainer's initials, the capacity, the places taken by other members and the number already waiting. The seats left, the bar and the waitlist position are derived. PLAN sets the weekly allowance.
What happens at the allowance?
With three bookings the Book buttons still work, but pressing one answers "Your plan allows 3 classes a week" and books nothing. Cancelling one makes room. A waitlist place does not use one of the three classes.
How does the waitlist work?
A full class shows "Join the waitlist" with your position, one after the members already waiting. Joining swaps the button for "Leave waitlist", and leaving puts it back. The demo never promotes anyone; the position is the point.
How do I use it with the keyboard?
The days are a radio group with the arrow keys. Each class action is a named button ("Book, Yoga flow at 07:00 on Thursday 15 October"), and one polite status line under the day's heading says what changed and how many of the three you have booked.