shadcn.io is not affiliated with official shadcn/ui
Resource Scheduler Calendar Block for React Aria
A window with six rooms and pieces of equipment by the hours 08:00 to 18:00 over three days, where two presses book a range, a booked cell in the way refuses, and each row counts its taken hours.
Installation
Overview
Book a room or a piece of equipment by pressing twice with this resource scheduler for React with React Aria. A framed window with a plus mark on each corner has a top bar with the title, previous and next Buttons that move across three typed days (Tuesday 13 to Thursday 15 October 2026) and a Toggle Group that shows All, Rooms or Equipment. The grid is a table: six resources down the side, each with the hours already taken ("5 of 10 h"), and the ten hours from 08:00 across the top. Existing bookings are spans with a title and the organiser's initials. To book, press a free hour to start (it gets a ring) and a later free hour in the same row to end; your booking is drawn hatched, and a booked hour in the way refuses in words ("Boardroom A is booked at 14:00"). Escape drops the start, and pressing your own booking removes it. The arrow keys, Home and End move between free hours, and the foot counts the day's bookings and hours. Only the grid scrolls, with the names held at the start. It's built from Toggle Group, Button, Badge and Guides, with a CSS entrance only. For office managers, facilities teams and any app that lets people reserve shared things by the hour.
FAQ
How do I add my resources and bookings?
Edit RESOURCES and LINES. Each resource has an id, a name, a kind (room or equipment) and a note. Each line in LINES is a booking written as day|resource|start hour|end hour|title|initials, with the end hour not included. The hours taken, the counts and the clash check are worked out from them.
How does the two-press booking work?
The first press on a free hour stores the resource and hour as the start. A second press on a later hour in the same row looks for any booked hour in between: if there is one it refuses and names it, otherwise it adds your booking from the start to the end hour inclusive. Pressing an earlier hour or another row starts again, and pressing the same hour books that single hour.
How do I use it without a mouse?
Each free hour is a button, with one tab stop for the grid. The arrow keys move to the next free hour in that direction, skipping booked ones, Home and End go to the first and last free hour of the row, Enter or Space presses, and Escape drops a start. The grid keeps its left-to-right order in right-to-left languages.
Why is today always 14 October?
Nothing in the block reads the clock. AS_OF is the one moment it treats as now, so the Today badge and the opening day are the same on any date.