Calendar Booking & Time Slots

Link to plugin page:

Demo to preview the settings


Build your own calendar booking feature and let this plugin do the heavy lifting of figuring out which time slots are available.
This plugin gives you the available timeslots as a daterangelist whilst accounting for timezones, allowing you to focus on creating your UI.
  • No complicated setup - just fill in the fields and immediately work with the time slots the plugin provides ⏱
  • No messing around with 3rd party tools, embedding, subscription costs & webhooks πŸ”¨
  • No arbitrary limits, have as many bookable calendars as your app needs πŸ—“
The whole plugin is a single element that you can drag to the page where you need to display the time slots.
  • Works when scheduling across timezones βœ…
  • Use your own custom UI βœ…

How to setup

Add element to 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

Image without caption
Image without caption
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.
Image without caption
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 Elements Properties

1. Available Slots