Calendar Booking &Time Slots

Demo to preview the settings

Introduction

Effortlessly integrate time slot availability into your app's UI with our plugin. With just a single element, you can access available time slots as a date range list, effortlessly handling time zones. No complex setup or reliance on third-party tools. Enjoy unlimited bookable calendars and seamless scheduling across time zones. Customize your UI to fit your app's design seamlessly.

How to setup

Add plugin element - “Available Slots” to the page

Start by adding the Available Slots element to the page. This is a small element without a UI, so place it wherever you'd like.

Set up the scheduling properties

The From and Until properties define from what starting date up to what end date the available slots will be returned. Formatted as YYYY-MM-DD.
If the fields are filled in incorrectly, these fields will automatically be assigned another value.
Interval defines the time between each time slot in minutes.
Duration defines the duration of each slot in minutes.
💡
A Duration of 30 with an Interval of 60 means you have one 30 minute meeting available every hour.
With x day from and x day until you specify the bookable hours for each day of the week. Specify a number from 0 - 24 to set the hour of the day on a 24-hour clock.
With Timezone you can specify in which timezone the bookable hours should be interpreted.
💡
What time zone should you use? Let's say Alice is a coach in your app with a bookable calendar for coaching. Bob from London wants to schedule a session with Alice who lives in Tokyo. In this scenario you should use Asia/Tokyo as the timezone. As for Bob, when he is booking a time, the available slots will be converted to London's timezone, so that Bob can see the times in his local time.
Busy lets you exclude specific time slots from the calendar from booking. Use this to exclude slots that are already busy, or specific times in the day like lunch. The Busy property expects a list of date range items.
To reset the component just use the Reset relevant inputs action provided by Bubble.
Image without caption

Integrating with Google Calendar

The Calendar Booking plugin can also be used in combination with the Google Calendar plugin. The Google Calendar plugin allows you to retrieve the users' occupied times in a day. These time slots can be inserted into the Available Slot busy property. These times will then be filtered out from the rest of the available slots.
Get the free plugin here → Not yet released
In order to insert the data from the Google calendar plugin make use of the free/busy field. Here you can make a call to an external API, select the google calendar Get free/busy option and then select it's body. Make sure to fill in the parameters according to your needs.
If you are using the Free/Busy property, the other busy parameter will be ignored.
Image without caption

Plugin Element “Available Slots” Fields

Title
Description
Type
From
From what date to start to consider the slots. Format as YYYY-MM-DD. Ex: 2021-11-18
Text
Until
At what date to stop getting the slots. Format as YYYY-MM-DD. Ex: 2021-11-19
Text
Duration
The length of each time slot in minutes.
Number
Interval
The interval between each time slot in minutes.
Number
Timezone
Timezone name formatted according to iana timezone database: https://www.iana.org/time-zones
Text
Monday from
Bookable from hour (0 - 24)
Number
Monday until
Bookable from hour (0 - 24)
Number
Tuesday from
Bookable from hour (0 - 24)
Number
Tuesday until
Bookable from hour (0 - 24)
Number
Wednesday from
Bookable from hour (0 - 24)
Number
Wednesday until
Bookable from hour (0 - 24)
Number
Thursday from
Bookable from hour (0 - 24)
Number
Thursday until
Bookable from hour (0 - 24)
Number
Friday from
Bookable from hour (0 - 24)
Number
Friday until
Bookable from hour (0 - 24)
Number
Saturday from
Bookable from hour (0 - 24)
Number
Saturday until
Bookable from hour (0 - 24)
Number
Sunday from
Bookable from hour (0 - 24)
Number
Sunday until
Bookable from hour (0 - 24)
Number
Busy
Slots that are already busy. Accepts a list of date ranges.
Date Range List
Free / Busy
The JSON response in text format returned by the Availability Google Calendar plugin when using the Free / Busy API call. Only parses the times of the first calendar in the returned list.
Text

Returned Values / Exposed States

Title
Description
Type
Available Slots
The available slots
Returns the list with available time slots