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-モジュール, and then import the resources そして sessions APIs from the ウィックス・ブッキング・バックエンド module.

1

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

The code will look like this:

1

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. 
• を使用する。  map function to build the resourceSchedules array from the resource name and scheduleId for each resource in the resourceCatalog 配列である。
• Set the options property of the dropdown element to the array of resource names and schedule IDs.

1

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

1

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().

1

Understanding the code.

Line 4: Create the sessionInfo object using the date from the function's parameters.
Lines 12,13: Set the session タイプ 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 真の.
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:

1

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"

ページコード

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

1

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().

1

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.

1

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 タイプ to "EVENT".
LIne 27: 追加 "Blocked" to the tags 配列である。
Line 32: If you want any user to be able to create a blocked time session, set the suppressAuth option to 真の.
Line 33: Call createSession() using the sessionInfo そして 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.

1

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.

ページコード

1

blockedSessions.web.js

1