Room Booking Timeline
Room picker where each meeting room is a day track with existing bookings drawn as blocks and the requested slot outlined across every row.
Room picker where each meeting room is a day track with existing bookings drawn as blocks and the requested slot outlined across every row.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Room Booking Timeline is the room picker for a requested slot: Thursday, June 18 from 1:00 pm to 2:00 pm for 4 people. Each of the four rooms is a horizontal day track from 9a to 5p with its existing bookings drawn as filled blocks and the requested window outlined in a dashed border across every row, so a free room reads at a glance. Huddle 2 carries a Best fit badge on a highlighted row, two rooms show a Book button, and Boardroom A clashes with the slot and reads as Busy.
Rooms are one const array with seats, location, and a busy array of start and end hours; two small helpers turn those hours into left and width percentages against the nine hour day. A legend up top labels the booked blocks and the requested slot, and a footer notes rooms release automatically when a meeting is cancelled early.
Reach for this block when a person has a time locked and needs to attach a room without opening each calendar in turn. Wire the room list to your resource directory and each busy array to that room bookings for the day.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the meeting room picker in a scheduling tool. Other timeline uses:
Tip: sort the best fit room to the top and badge it; a picker that decides for the common case still leaves the full grid open for the exceptions.