Example Description
In this example, you can select one or more Wix Bookings staff members and block off a chunk of time on a specified day from their calendar.
Security Note
The code in this example exposes sensitive business information. Make sure to use this example on a dashboard page so that only authorized admins can access the data.
How We Built It
Page Elements
We added the following page elements to our site:
2 multi-checkboxes, one for selecting all staff members and the other for selecting each individual staff member
1 date picker for selecting the relevant date
2 time pickers for selecting start and end time
1 button to trigger the blocking time process
1 text element for displaying messages
Repeaters for displaying available service slots for each staff member
Code
Initialize the filters and set default values.
Use the backend getStaffList() function to return the staff member data and initialize the multi-checkbox options.
Create an onClick() event for the button that does the following: create startDate and endDate date objects based on the selected date and times, and use the backend blockSessions() function to start the process of blocking time based on the selected staff members.
Use the text element to display success or error messages.
Display the adjusted list of available service slots in the staff slot repeaters. Note that the blocked time will also appear in the staff members’ calendars.
Related Examples
Did this help?
|
Thanks for your feedback!

Bookings Payroll Calculator
Calculate and display bookings and earnings for each staff member.

Advanced

Send SMS on Booking Confirmation
Send a confirmation SMS when customers book a service.

Advanced