Velo: Blocking Off Time in the Wix Bookings Calendar

The Wix Bookings backend module lets you manage bookings resources using Velo APIs.

When managing staff resource schedules, a common use case is setting up the times that staff are available, and the times that they're not.

What if you want to block off some time in the middle of the work day when your staff resource is not available ? You can do this by using the createSession() function to create "blocked time". 

To set up blocked time, you need to create a session of type "EVENT" with a tag value of "Blocked". The session can be a single session or a recurring session.

In the first example, we'll create a function that takes a resource ID and creates a single blocked time session on the resource's schedule. We'll also see how to create a dropdown element containing all of your resources. Once we have that working, in the second example, we'll add some functionality to make recurring blocked time sessions.

Let's assume you already have some staff members defined. If you don't, take a look at Creating Bookings Resources using Velo, or create some using the dashboard Staff page.

Before we go on, you need to install the Bookings app. If you haven't installed it yet, here's how to do it.

1. Select the Add Apps icon in the editor.

2. Type "Bookings" in the search field and select the Wix Bookings App.

3. Click "Add to Site."

Setting up our site page

Create a page with the elements shown above. Put the Recurrence Rule text and inRecurrenceRule input element inside the container box box1. In the Properties and Events panel for box1, select Collapsed under Default Values. Set the default text as shown above for the From, To, and Recurrence Rule input elements.

Query Resources to Load the Dropdown Element.

We'll load the dropdown element with a list of resources, display the resource name and use the resource ID as the value.

Create a backend file called blockedSessions.web.js. This file will hold all of our backend code for this tutorial.  

First import the Permissions enum and webMethod function from wix-web-module, and then import the resources and sessions APIs from the wix-bookings-backend module.

Create a function called getResourceList() that returns an array of all resources.

The code will look like this:

Now in your page code, create the loadResourceDropdown() function to load the dropdown element. Call the loadResourceDropdown() function from the onReady code block so the dropdown is loaded when the page is displayed. 

Don't forget to import getResourceList from the APIs from the blockedSessions backend file. 

Add the following code to your page to load the  ddResource dropdown with resource names and their schedule IDs:

• Call getResourceList() to get a list of all of your resources. 
• Use the  map function to build the resourceSchedules array from the resource name and scheduleId for each resource in the resourceCatalog array.
• Set the options property of the dropdown element to the array of resource names and schedule IDs.

Now create an onClick function for the button that will gather the information we need, and call the function to create the blocking sessions.

Create A Single Blocked Time

Now we can create our blocking session. Create a function in the blockedSessions.web.js backend code file called createSingleBlockedSession().

Understanding the code.

Line 4: Create the sessionInfo object using the date from the function's parameters.
Lines 12,13: Set the session type to "EVENT" and the tag to "Blocked".
Line 16: If you want any user to be able to create a blocked time session, set the suppressAuth option to true.
Line 17: Call createSession() to create the blocked time session and return the session details to the calling function. This returns to the page code that called the createSingleBlockedSession() function, and the created session is displayed in the console.
The returned session looks like this:

Recurring Blocked Times

Now that we've seen single blocked times working, let's take it up a level and create a series of blocked times using recurrence rules.

Recurrence rules specify when and how often an event repeats. A session that repeats every second week on a Monday until January 7, 2022 at 8 AM, is specified using the following recurrence rule:"FREQ=WEEKLY;INTERVAL=2;BYDAY=MO;UNTIL=20220107T080000Z"

Page Code

When we defined our page, we set the container box to collapsed. Expand the box based on the checkbox cbRecurrence using the following code:

Now that we see the recurrence rule, we can use it to create recurring sessions.

Update the button's onClick  function with the code below, to add processing for recurring sessions. If the cbRecurring checkbox is checked, call  createRecurringBlockedSession(), passing the recurrence rule. Otherwise, call createSingleBlockedSession().

Create A Recurring Blocked Time Session

Now we can create our recurring blocking session. Create a function in the blockedSessions.web.js backend code file called createRecurringBlockedSession().

In your page code, add createRecurringBlockedSession to your import statement.

Understanding The Code

Line 5: Create the sessionInfo object. You have to break the dates into their components for the localDateTime objects. You cannot use the timestamp properties for recurring sessions.
Line 26: Set the session type to "EVENT".
LIne 27: Add "Blocked" to the tags array.
Line 32: If you want any user to be able to create a blocked time session, set the suppressAuth option to true.
Line 33: Call createSession() using the sessionInfo and options objects, and return the promise to the calling function on the site page.

You'll get a session object displayed on the console, similar to the one below.

Check that it Worked.

In addition to the returned session object, you can also check your calendar to confirm that the blocked time appears for your resource at the time that you specified.

All the Code

Below is all of the code used in the tutorial in one place.

Page Code

blockedSessions.web.js