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