getServiceAvailability( )

Gets the available slots for a specific service.

Description

The getServiceAvailability() function returns a Promise that resolves to a list of slots from the given service that have open spots, and can therefore still be booked. If the service is offered in multiple locations, a slot is returned for each location.

Note: location in the slot object is not yet available to all users.

Service availability means different things for the different service types:

Appointments: See here to understand what affects the availability of an appointment. An appointment is returned as available if it meets the conditions outlined in the article linked above and the appointment slot's time falls within the time specified by the AvailabilityOptions or within the default time frame if no options are specified.
Classes: A class slot is returned as available if the slot's time falls within the time specified by the AvailabilityOptions or within the default time frame if no options are specified.
Courses: The first session slot from a set of course sessions is returned as available if the first course slot's time falls within the time specified by the AvailabilityOptions or within the default time frame if no options are specified.

To understand how getServiceAvailability() is used in a typical booking lifecycle, see Typical Booking Lifecycle.

The passed serviceId must be an ID from your site's Bookings/Services collection. Typically, you retrieve the ID from from the collection using a query or through a dataset.

Optionally, you can pass an AvailabilityOptions object that defines a date range for which slots should be returned. If you do not pass an an AvailabilityOptions object, the default date range is from the date and time the function is called until one week later.

Syntax

function getServiceAvailability(serviceId: string, [options: AvailabilityOptions]): Promise<ServiceAvailability>

getServiceAvailability Parameters

NAME

TYPE

DESCRIPTION

serviceId

string

The ID of the service for which to check slot availability.

options

Optional

AvailabilityOptions

Options that refine which slots should be returned.

Returns

Fulfilled - A list of available slots. Rejected - Bookings error object.

Return Type:

Promise<ServiceAvailability>

NAME

TYPE

DESCRIPTION

slots

Array<Slot>

List of the available slots.

Max: 500 slots

Was this helpful?

Get the available slots for a service

Copy Code

1import wixBookingsFrontend from 'wix-bookings-frontend';
2
3// ...
4
5let serviceId = // get service ID
6
7wixBookingsFrontend.getServiceAvailability(serviceId)
8  .then( (availability) => {
9    let slots = availability.slots;
10    let firstSlot = slots[0];
11  } );
12
13/* firstSlot:
14 * {
15 *   "_id": "eyIjoxN2xhc3NJbnN0YW5jZUlkIjoiNjc4ZDYyMzItZ",
16 *   "startDateTime": "2018-11-20T08:00:00Z",
17 *   "endDateTime": "2018-11-20T09:00:00Z",
18 *   "serviceId": "a642caa6-1aba-4aa4-9f07-5aed39fbd3ba",
19 *   "capacity": 20,
20 *   "remainingSpots": 20,
21 *   "staffMemberId": "5a55aa7c-8e5d-488a-8191-7d430f2cdcc2",
22 *   "location": {
23 *      "type": "OWNER_BUSINESS",
24 *      "businessLocation": {        
25 *          "id": "d3cd28cf-4415-4680-9fa3-f690484e7432",
26 *          "name": "New York Office",
27 *          "description": "Our Office in NY",
28 *          "address": {
29 *              "formatted": "100 Gansevoort St, New York, NY 10014, United States",
30 *              "location": {
31 *                  "latitude": 40.7391622,
32 *                  "longitude": -74.0113215
33 *              },
34 *              "streetAddress": {
35 *              "name": "Gansevoort St",
36 *              "number": "100"
37 *              },
38 *              "city": "New York",
39 *              "subdivision": "New York", 
40 *              "country": US",
41 *              "postalCode": "NY 10014"
42 *          }
43 *      }
44 *   }
45 *   "bookable": false,
46 *   "constraints": { 
47 *     "bookableFrom": "2018-12-12T14:00:00.000Z",
48 *     "bookableUntil": "2019-01-16T14:00:00.000Z"
49 *   } 
50 * }
51 */

Get the available slots for a service for a specific date range

Copy Code

1import wixBookingsFrontend from 'wix-bookings-frontend';
2
3// ...
4
5let serviceId = // get service ID
6
7let today = new Date();
8let startRange = new Date();
9let endRange = new Date();
10startRange.setDate(today.getDate() + 7);  // one week from now
11endRange.setDate(today.getDate() + 14);   // two weeks from now
12
13let options = {
14  startDateTime: startRange,
15  endDateTime: endRange
16};
17
18wixBookingsFrontend.getServiceAvailability(serviceId, options)
19  .then( (availability) => {
20    let slots = availability.slots;
21    let firstSlot = slots[0];
22  } );
23
24/* firstSlot:
25 * {
26 *   "_id": "eyIjoxN2xhc3NJbnN0YW5jZUlkIjoiNjc4ZDYyMzItZ",
27 *   "startDateTime": "2018-11-20T08:00:00Z",
28 *   "endDateTime": "2018-11-20T09:00:00Z",
29 *   "serviceId": "a642caa6-1aba-4aa4-9f07-5aed39fbd3ba",
30 *   "capacity": 20,
31 *   "remainingSpots": 20,
32 *   "staffMemberId": "5a55aa7c-8e5d-488a-8191-7d430f2cdcc2"
33 *   "location": {
34 *   "type": "OWNER_BUSINESS",
35 *   "businessLocation": {        
36 *       "id": "d3cd28cf-4415-4680-9fa3-f690484e7432",
37 *       "name": "New York Office",
38 *       "description": "Our Office in NY",
39 *       "address": {
40 *           "formatted": "100 Gansevoort St, New York, NY 10014, United States",
41 *           "location": {
42 *               "latitude": 40.7391622,
43 *               "longitude": -74.0113215
44 *           },
45 *           "streetAddress": {
46 *           "name": "Gansevoort St",
47 *           "number": "100"
48 *           },
49 *           "city": "New York",
50 *           "subdivision": "New York", 
51 *           "country": US",
52 *           "postalCode": "NY 10014"
53 *       }
54 *     }
55 *   }
56 *   "bookable": false,
57 *   "constraints": {
58 *     "bookableFrom": "2018-12-12T14:00:00.000Z",
59 *     "bookableUntil": "2019-01-16T14:00:00.000Z"
60 *   }
61 * }
62 */

A full bookings scenario

This examples demonstrates a simple bookings scenario. In the interest of simplicity the code does not deal with display considerations or validations that would normally be required to make sure users perform the flow as intended. The code assumes a page with the following elements:

serviceRepeater: Displays the services that can be booked. The elements in the repeater match the information we want to display for each service.
slotRepeater: Displays the slots that are available for the selected service. The elements in the repeater match the information we want to display for each slot.
formFieldRepeater: Contains input fields for collecting form field values needed to book the selected service. Each item contains one input element.
bookButton: Performs a booking checkout after a service and slot are selected and the form fields have been entered.

Copy Code

1import wixData from 'wix-data';
2import wixBookingsFrontend from 'wix-bookings-frontend';
3
4let formFields;   // form fields the selected service requires
5let selectedSlot; // service slot that was selected
6
7// When the page loads, query for all services and use the
8// results to set the service repeater's data.
9$w.onReady(function () {
10  wixData.query("Bookings/Services")
11    .find()
12    .then( (results) => {
13      $w("#serviceRepeater").data = results.items;
14    } );
15});
16
17// When the service repeater's data is set, populate its items
18// with the service data.
19export function serviceRepeater_itemReady($item, itemData, index) {
20  $item("#serviceName").text = itemData.serviceName;
21  $item("#tagLine").text = itemData.tagLine;
22  $item("#image").src = itemData.imageURL;
23}
24
25// When a service is selected, store its form fields for later,
26// get the service's available slots, and use the results to set
27// the slot repeater's data.
28export function serviceRepeaterContainer_click(event) {
29  $w("#serviceRepeater").forItems([event.context.itemId], ($item, itemData, index) => {
30    formFields = itemData.form.fields;
31  } );
32
33  wixBookingsFrontend.getServiceAvailability(event.context.itemId)
34    .then( (availability) => {
35      $w("#slotRepeater").data = availability.slots;
36    } );
37}
38
39// When the slot repeater's data is set, populate its items
40// with the slot data.
41export function slotRepeater_itemReady($item, itemData, index) {
42  $item("#dateText").text = itemData.startDateTime.toLocaleDateString();
43  $item("#timeText").text = itemData.startDateTime.toLocaleTimeString();
44}
45
46// When a slot is selected, store it for later, use the stored form
47// fields to set form field repeater's data.
48export function slotRepeaterContainer_click(event) {
49  $w("#slotRepeater").forItems([event.context.itemId], ($item, itemData, index) => {
50    selectedSlot = itemData;
51  } );
52
53  $w("#formFieldRepeater").data = formFields;
54}
55
56// When the form field repeater's data is set, populate its items
57// with the form fields.
58export function formFieldRepeater_itemReady($item, itemData, index) {
59  $item("#fieldInput").placeholder = itemData.label;
60}
61
62// When the booking button is clicked, grab the form field values,
63// build the bookingInfo object, and perform a booking checkout.
64export function bookButton_click(event) {
65  let formFieldValues = [];
66
67  $w("#formFieldRepeater").forEachItem( ($item, itemData, index) => {
68    formFieldValues.push({
69      "_id": itemData._id,
70      "value": $item("#fieldInput").value
71    });
72  } );
73
74  let bookingInfo = {
75    "slot": selectedSlot,
76    "formFields": formFieldValues
77  };
78
79  wixBookingsFrontend.checkoutBooking(bookingInfo)
80    .then( (results) => {
81      $w("#confirmationText").text = `Booking ID: ${results.bookingId} Status: ${results.status}`;
82    } );
83}
84