Link to plugin page:
Demo to preview the settings
Introduction
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
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.
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.