Working Hours Editor
Weekly availability settings with per day switches, bookable time range chips, a timezone note, weekly total badge, and save actions.
Weekly availability settings with per day switches, bookable time range chips, a timezone note, weekly total badge, and save actions.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Working Hours Editor is the weekly availability settings behind a booking page, with the promise that invitees can only book inside these windows. Seven weekday rows each pair an on and off switch with a bookable time range and a daily total: Monday through Thursday run 9:00 am to 5:00 pm at 8 h, Friday runs 9:00 am to 1:00 pm at 4 h, and Saturday and Sunday read Unavailable. The footer states the windows apply in Europe/London (UTC+1) and shift with daylight saving automatically, then pairs a 36 h bookable per week badge with Cancel and Save hours.
Days are one array with enabled, start, end, and hours fields, and the weekly total is summed from the row hours rather than hard coded. Toggling a switch off collapses the range to the Unavailable state, so editing the array is all it takes to reshape the week.
Reach for this block on the settings surface of a scheduling tool where a person defines when they accept bookings. Wire the switches and time ranges to your availability record and Save hours to your settings mutation.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the personal bookable hours editor. Other working hours editor uses:
Tip: keep the timezone line pinned to the footer; a window that reads 9 to 5 means nothing until the reader knows whose clock it follows.