Introduction

To allow your guests to schedule video calls, you will likely need to display available time slots for a user or group of users. The available time slots are typically displayed in a calendar or list view.

Using the 24sessions availability, you can get the availability for a user, a set of users, or a meeting type. The availability module can be connected to external calendars so that the users won’t get meeting bookings at times they are in company meetings.

In the image below you can see an example of the 24sessions booking form, this is one way of viewing the available time slots for a user.

In this tutorial, you will learn to:

• Fetch available time slots with predefined criteria
• Render the available times

∞ Fetching available time slots

Available time slots can be fetched from our booking API. Using this API, you can filter the availability base on the following parameters:

• start: The start date of the request
• end: The end date of the request
• userId: List of user ID’s
• meetingType: Meeting type ID

Additionally, the following fields are required:

• outputTimezone: Timezone for the results of the query
• timeSeparation: Minutes between meetings
• slotLength: Length of meetings in minutes
• ignoreAvailability: True/false, whether to ignore the availability of the selected user(s)

Sample request:

var settings = {
  "url": "https://keeper.24sessions.com/api/v1/instance/timeslots/available/booking-form?filter%5Bstart%5D=2021-09-14+00%3A00&filter%5Bend%5D=2021-09-20+23%3A59&filter%5BblockBefore%5D=0&filter%5BoutputTimezone%5D=Europe%2FAmsterdam&filter%5BtimeSeparation%5D=15&filter%5BslotLength%5D=15&filter%5BignoreAvailability%5D=false&filter%5BuserId%5D=4&filter%5BmeetingTypeId%5D=135&fields%5BavailableTimeSlots%5D=start%2Cavailable%2Clabel%2Ctype&instance=YOUR-INSTANCE.24sessions.com",
  "method": "GET",
  "timeout": 0,
};

$.ajax(settings).done(function (response) {
  console.log(response);
});

∞ Rendering the time slots

The response of the API request will consist of available dates and times as unix timestamps, as seen in the sample response below.

{
  "1623888000": { 				 // timestamp of the day
    "1623906000": {				 // timestamp of the timeslot
      "available": true,		        // availability
      "duration": 15,				// duration in minutes
      "label": "07:00",				
      "label_12h": "07:00",
      "label_24h": "07:00",
      "label_am_pm": "am",
      "start": "2021-06-17T07:00:00+02:00",	
      "type": "free",
      "value": 1623906000
    }
}

The result can be converted into date objects and rendered on a calendar of choice or simply a list.

∞ Considerations

To verify that a time slot is available at the moment when you create a meeting, you can create an additional call to verify if that particular time is still available. This prevents double bookings in the event that two guests are creating a booking at the same time.

The API can return the availability for a maximum of seven days at a time. To get the availability for more than seven days, call the function several times.