With this plugin, it is easy to select hours available for events as well as create available time slots for a specific day, and even create weekly patterns.
Also, it is able to set the length of the interval and pause between the end of the interval and the beginning of the new one.
Easily manage your bookings by blocking out your availability or setting specific dates and times that users are allowed to book appointments.
How to setup
Place the required elements on the page and fill in the fields. You can find a more detailed configuration on the plugin demo page.
Plugin Elements Properties
This plugin has four visual elements which can be used on the page: OnePattern Generator, Weekly Pattern Executor, Interval Generator, and Google Access. Range Slots Decoder (for v1.2.0 and older).
One Day Pattern Generator
Generate pattern or return slots for the selected day using data from fields.
Element Fields
Title
Description
Type
Slot length (minutes)
The time period between the start and the end of a slot.
number
Slot break (minutes)
Pause between the end of a slot and the beginning of the next slot.
number
Use the intervals?
Set “yes” if you want to generate slots from a list of intervals. For example, a list of intervals from the database. If the value is “yes” you should provide the list of intervals on the “List of intervals” field and slots will be generated from these intervals. If the value is “no” you can provide a list of intervals in the “List of intervals (text)” field. If you didn’t provide the “List of intervals (text)” then slots will be generated from the “Start hour” and “End hour” fields.
yes/no
List of intervals
List of intervals to generate slots. For example, use this field if you want to provide a list of intervals from the database. These intervals will be used to generate slots if the “Use the intervals?” field has the “yes” value.
list of date range (optional)
List of intervals (text)
List of intervals to generate slots. For example, use this field if you want to provide a list of intervals in text format. These intervals will be used to generate slots if the “Use the intervals?” field has the “no” value. Example: 12:00:00-13:00:00;15:30:00-16:00:00.
string (optional)
Start hour
Hour represents the start of the interval. If the “Use the intervals?” field has the “no” value and the “List of intervals (text)” has no value this field is used as the beginning of the interval. Example: 09:00
string
End hour
Hour represents the end of the interval. If the “Use the intervals?” field has the “no” value and the “List of intervals (text)” has no value this field is used as the end of the interval. Example: 20:00
string
Pauses
All slots that overlap with pauses will be excluded. This field influences to result if you don't use “List of intervals” or “List of intervals (text)”.
Example: 12:00:00-13:00:00;15:30:00-16:00:00
string (optional)
Booked Slots Type
App Type representing booked slots in your database app. Set this field to indicate booked slots type in your app. This type should have fields that represent the beginning and the end of booked slots. Also, this field is important for the “Booked Slots” field.
App Type (optional)
Booked Slot Start Field
If the “Booked Slots Type” field is not empty select the type field responsible for the beginning of the booked slots.
date (optional)
Booked Slot End Field
If the “Booked Slots Type” field is not empty select the object field responsible for the end of the booked slots.
date (optional)
Booked Slots
List of booked slots to exclude them from the result. Provide a list of booked slots to exclude them from the result. This field should have the same type as the “Booked Slots Type” field.
list of Booked Slots Type (optional)
Slots Type
App Type representing slots in your app. The plugin provides a special data type for the slot. Use the data type provided by the plugin on this field, Slot (Time Slots).
Slot (Time Slot)
Timezone
Timezone of generated slots.
Dropdown
Element Actions
Get Slots - Return slots for one day.
Fields:
Title
Description
Type
Date
Wanted date for time slot generation.
date
Element Events
Title
Description
Slots are counted
This event is triggered when time slots were generated and these are ready to use.
Events are loaded
This event is triggered when all provided events was loaded.
Events are loading
This event is triggered when the loading of provided events started.
Element States
Title
Description
Type
List of Slots
List of slots represented in text format. This result has no date, just an hour. Example: 07:00:00 - 08:00:00
list of string
List of Slots As Dates
List of slots represented in object format is indicated in the “Slots Type” element field. Each element is a slot with start and end time fields.
list of Slots Type
Day Pattern
The string stores information from the pattern.
Example: {"start":"09:00:44-11:00:54;13:00:44-17:00:54","end":"","pause":"","slot_length":45,"slot_break":10,"isIntervals":true}
string
list of slots as date (timezone)
List of slots represented in object format is indicated in the “Slots Type” element field. Each element is a slot with start and end time fields. The time is calculated based on "Timezone" field.
list of Slots Types
Weekly Pattern Executer
This element generates slots using patterns created in the “One Day Pattern Generator" element.
Element Fields
Title
Description
Type
Monday
Day pattern generated by "One Day Pattern Generator". Apply a pattern for each Monday.
string (optional)
Tuesday
Day pattern generated by "One DayPattern Generator". Apply a pattern for each Tuesday.
string (optional)
Wednesday
Day pattern generated by "One DayPattern Generator". Apply a pattern for each Wednesday.
string (optional)
Thursday
Day pattern generated by "One Day Pattern Generator". Apply a pattern for each Thursday.
string (optional)
Friday
Day pattern generated by "One Day Pattern Generator". Apply a pattern for each Friday.
string (optional)
Saturday
Day pattern generated by "One Day Pattern Generator". Apply a pattern for each Saturday.
string (optional)
Sunday
Day pattern generated by "One Day Pattern Generator". Apply a pattern for each Sunday.
string (optional)
Booked Slots Type
App Type representing booked slots in your database app. Set this field to indicate booked slots type in your app. This type should have fields that represent the beginning and the end of booked slots. Also, this field is important for the “Booked Slots” field.
App Type (optional)
Booked Slot Start field
If the “Booked Slots Type” field is not empty select the type field responsible for the beginning of the booked slots.
date (optional)
Booked Slot End field
If the “Booked Slots Type” field is not empty select the object field responsible for the end of the booked slots.
date (optional)
Booked Slots
List of booked slots to exclude them from the result. Provide a list of booked slots to exclude them from the result. This field should have the same type as the “Booked Slots Type” field.
list of Booked Slots Type (optional)
Slots Type
App Type representing slots in your app. The plugin provides a special data type for slots. Use the data type provided by the plugin on this field, Slot (Time Slots).
Slot (Time Slot)
Timezone
Timezone of generated slots.
Dropdown
Element Actions
Get Slots For One Date - Get slots for the indicated date. The action will return slots of the indicated date if the date is corresponding to the completed day field from the Weekly Pattern Executer.
Fields:
Title
Description
Type
Day
Day for which slots are generated.
date
Get Slots For Range - Get slots for the indicated range of dates.
Fields:
Title
Description
Type
Dates range
Range of dates for which slots are generated.
date range
Element Events
Title
Description
Slots are counted
This event is triggered when time slots were generated and these are ready to use.
Events are loaded
This event is triggered when all provided events was loaded.
Slots for the range are counted
This event is triggered when slots for the range was generated and are ready to use. This event is triggered just after the “Get Slots For Range” element action using.
Pattern not found
This event is triggered when not found at least one pattern in element fields.
Element States
Title
Description
Type
List of slots
A list of slots for an indicated day represented in object format is indicated in the “Slots Type” element field. Each element is a slot with start and end time fields.
list of Slots Type
List of slots for range (for v1.2.0 and older)
List of slots encoded in text format. This state should send in the “Range Slots” field from the “Range Slots Decoder” element. This element will decode this state.
string
List of slots for a range
A list of slots for an indicated date range represented in object format is indicated in the “Slots Type” element field. Each element is a slot with start and end time fields.
list of Slots Type
list of slots (timezone)
List of slots for an indicated day represented in object format is indicated in the “Slots Type” element field. Each element is a slot with start and end time fields. The time is calculated based on "Timezone" field.
list of Slots Types
list of slots for range (timezone)
List of slots for an indicated date range represented in object format is indicated in the “Slots Type” element field. Each element is a slot with start and end time fields. The time is calculated based on "Timezone" field.
list of Slots Types
Range Slots Decoder (for v1.2.0 and older)
Transform string returned from Weekly Pattern Executer in the list of slots.
Element Fields
Title
Description
Type
Range Slots
List of slots for range encoded as text returned by “List of slots for a range” state from “Pattern Executer” element.
string
Slots Type
App Type representing slots in your app. The plugin provides a special data type for a slot. Use the data type provided by the plugin on this field, Slot (Time Slots).
Slot (Time Slot)
Element States
Title
Description
Type
Slots
List of slots represented in object format is indicated in the “Slots Type” element field. Each element is a slot with start and end time fields.
list of Slots Type
Example:
Example of data returned by Pattern Executer for range.
Converts dates or text to the correct time interval for the plugin.
Element Fields
Title
Description
Type
Time 1 (date)
The date is the beginning of the interval.
date (optional)
Time 2 (date)
The date is the end of the interval.
date (optional)
Time 1 (text)
Text that is the beginning of the interval. If you want to use this field keep clear the above fields’ values: “Time 1 (date)”, and “Time 2 (date)”.
string (optional)
Time 2 (text)
Text that is the ending of the interval. If you want to use this field keep clear the above fields’ values: “Time 1 (date)”, and “Time 2 (date)”.
string (optional)
Element Events
Title
Description
Changed
This event is triggered when the “Interval” state was generated and is ready to use.
Element States
Title
Description
Type
Interval
Interval generated using two times indicated in plugin fields.
Example: 12:00:00-14:00:00
string
Google Access
This authentication element for Google to get an access token. This token is used for API calls later.
Element Actions
Authorize - Do a redirect to the Google Access grant page.
Authorize Code - Do a redirect to the Google Access grant page. Returns an authorization code. Use this code in the action Get Tokens by code to receive token and refresh token.
Element Events
Title
Description
Access token is ready
This event is triggered when the access token is ready after authorization.
Access code is ready
This event is triggered when the access code is ready after authorization.
Element States
Title
Description
Type
access token
The access token from Google after authorization.
text
API key
The API key from the Google app is set up in plugin settings.
text
access code
The access token from Google after action Authorize Code.
text
API Calls
Plugin Data Calls
Slot
This data call is used to specify Slot Type fields for plugin elements.
Returns:
Title
Description
Type
Start Slot
Indicates the beginning of the slot.
date
Stop Slot
Indicates the end of the slot.
date
Get Google Calendar Events
This data call is used to get list of Google Calendar events.
Fields:
Title
Description
Type
Calendar Id
The calendar ID from Google Calendar. Use the “Get Google Calendar List” call to get all available calendars.
text
Api Key
The API Key from Google. Use here the “API Key” state from the “Google Access” element.
text
Date
Date for events in "yyyy-mm-dd" format. e.g. 2023-05-29
text
Hash
The random text.
text
Authorization
The call authorization. Use the “Bearer ” + “access token” state from the “Google Access” element.
The call authorization. Use the “Bearer ” + “access token” state from the “Google Access” element.
text
Resource ID
An opaque ID that identifies the resource being watched on this channel. Stable across different API versions. Search this value in the results of the “Create Webhook” action.
text
Channel ID
A UUID or similar unique string that identifies this channel. Search this value in the results of the “Create Webhook” action.
text
Returns:
This call returns nothing.
Get Tokens by code
TODO: add description to the api call.
Name
Description
Type
Code
The authorization code from the Authorize Code action
Text
Client_id
Your client ID.
Text
Client_secret
Your client secret.
Text
Redirect_uri
The same redirect URI you used during the authorization request.
The token can be an access token or a refresh token. If the token is an access token and it has a corresponding refresh token, the refresh token will also be revoked. If the revocation is successfully processed, then the HTTP status code of the response is 200. For error conditions, an HTTP status code 400 is returned along with an error code.
Text
Return Values:
Return type: empty or error.
💡
Check return’s field “returned_an_error” to determinate when action is success
Auxiliary action to generate request string for action Create a Google Calendar event. Use this action to fill-in the field “Attendees”.
Title
Description
Type
Attendees Emails
A list of Attendees Emails
Text(list)
Display Names
A list of Display Names
Text(list)
Return Values:
Title
Description
Type
Attendees
The attendees of the event
Text
Workflow example
Using One Day Pattern Generator
See this workflow example, for how the One Day Pattern Generator element and its action are used.
The One Day Pattern Generator element is placed on the page with the following completed fields.
☝
1. If the “Use the intervals?” field is “yes”, then for pattern value will be used intervals from the “List of intervals” field.
2. If the “Use the intervals?” field is “yes” and the “List of intervals” field is not completed, then the pattern value will not be generated.
3. If the “Use the intervals?” field is “no” and the “List of intervals (text)” field is completed, then for pattern value will be used intervals from the “List of intervals (text)” field.
4. If the “Use the intervals?” field is “no” and the “List of intervals (text)” field is not completed, then for pattern value will be used “Start hour” and “End hour” fields.
☝
Fields from Booked slots are optional.
Also, on the page, is placed Text element with the One Day Pattern Generator pattern state.
To have access to the List of Slots states, on the page, used the Get today slots button.
In the workflow, when this button is clicked then is called the Get Slots element action. After this action, the List of Slots states will be available from the One Day Pattern Generator element.
The List of Slots states are listed, so these are used in two Repeating Group elements.
List of Slots as text:
List of Slots as date:
Using Weekly Pattern Executer
This workflow example represents how the Weekly Pattern Executer element is used and its actions.
On the page, it is placed the Weekly Pattern Executer and 7 One Day Pattern Generator elements with the following completed fields.
☝
Fields from Booked slots are optional.
To have access to element states, on the page, are used Get Time Slots for date and Get Time Slots for date range buttons.
In the workflow, when the Get Time Slots for date button is clicked then is called the Get Slots For One Date element action. After this action, just the List of slots state will be available from the Weekly Pattern Executer element.
☝
The Day field from action is filled from an AirDate/TimePicker element.
The List of slots state is a list, so this is used in the Repeating group element.
In the workflow, when the Get Time Slots for date range button is clicked then is called the Get Slots For Range element action. After this action, just the List of slots for a range state will be available from the WeeklyPattern Executer element.
☝
The Dates range field from action is filled from an AirDate/TimePicker element.
The List of slots for a range state from the WeeklyPattern Executer element is used in the Repeating Group element because it is a list.
Using Interval Generator
In this example, it is represented how is used Interval Generator element.
On the page, it is placed Interval Generator element with the following completed fields.
☝
All fields are optional!
☝
To use the Time 1 (text) and Time 2 (text) fields, keep clear Time 1 (date) and Time 1 (date) fields.
Also, on the page, is placed Text element with IntervalGenerator interval state.
💡
Interval Generator Interval state value may be useful for the One Day Pattern Generator element in the List of intervals (text) field.
In this example, it is represented how is used Google Access element.
On the page, it is placed an Google Access element.
On the page, it is placed an element for click listener.
In the workflow, when Auth with Google is clicked is called the Authorize action.
In the workflow, when Google Access Access token is ready workflow is added. This workflow set list of available calendars in a custom state.
Create a webhook
In this example, it is represented how to create a webhook for Google Calendar.
☝
The webhook is created just for a specific Google Calendar ID.
On the page, a Dropdown element is used to list all available calendar IDs.
On the page, it is placed an element for click listener.
In the workflow, when Add listener for calendar is clicked is called the Create Webhook action.
In the backend, it is created a “google_hook” workflow.
⚠️
The backend workflow needs to be initialized first. Please read steps 4 - 12 from this documentation to learn how to initialize a backend workflow.
Using the Timezone feature
Let's imagine we have an international app for booking something in Los Angeles. Our users will be able to book something from any country.
☝
The plugin element calculates the time zone difference between the current time zone of the user and the selected time zone from the “Timezone” field. The calculation is done with the mention that Bubble automatically will adapt the saved date from the database.
Setup
On the page, it is placed a One Day Pattern Generator plugin element with the following setup.
ℹ️
Other fields are not important in this case.
Here we prepared a pattern for slots between 08:00 - 12:00. Slot length is 50 mins with 10 mins break.
Based on the One Day Pattern Generator plugin element, the Weekly Pattern Executer plugin element is set up with the following settings.
☝️
The “America/Los_Angeles” value was selected because we are looking to book something in Los Angeles.
The Booked Slots field is completed with a list of Bookings.
A Date Picker element is used to select the date.
A Repeating Group element is used to preview the generated slots.
In the Workflow tab, when a date in the Date Picker element is selected, then the Get Slots For One Date action of the Weekly Pattern Executer element is called.
☝️
After action execution, the List of slots and list of slots (timezone) states of the Weekly Pattern Executer element will be available.
Additionally, when the Text element from the Repeating Group is clicked, a Booking thing is created in the database. It is recognized as book action.
⚠️
Take a look that for Booking creation is used value from the list of slots (timezone) states!
Optionally, the slots list is refreshed by calling the Get Slots For One Date action.
How will it look for a user from the “America/Los_Angeles” timezone
Imagine a user from the "America/Los_Angeles" timezone will book something.
A user selected a desired date (20th) in the Date Picker and obtained the list of available slots.
☝️
On the page are displayed slots from the List of slots state!
☝️
Because the user has the same timezone, the list of slots (timezone) state will contain the same values.
The user clicks on the desired slots to book.
☝️
In the database is saved value from the list of slots (timezone) state!
The booked slot was excluded from the results because the Weekly Pattern Executer element was set up in the Booked slots section.
The result after booking.
How will it look for a user from the “Asia/Tokyo” timezone
Imagine a user from the "Asia/Tokyo" time zone will book something.
The user selected the same date (20th) in the Date Picker and obtained the list of available slots.
☝️
From the start need to mention that the booked slot by the user from "America/Los_Angeles" time zone is excluded from the results.
☝️
On the page are displayed slots from the List of Slots state!
☝️
Because the user has a different timezone, the list of slots (timezone) state will contain different values.
The user clicks on the desired slots to book.
☝️
In the database is saved value from the list of slots (timezone) state!
The booked slot was excluded from the results because in the Weekly Pattern Executer element was set up in the Booked slots section.
The result after booking.
Changelogs
Update 14.01.25 - Version 1.32.0
Fixed timezone error from console.
Update 09.01.25 - Version 1.31.0
Added timezone feature.
Added "Timezone" field. [both elements]
Added "list of slots as date (timezone)" state. [One Day Pattern Generator]
Added "list of slots (timezone)" state. [Weekly Pattern Executer]
Added "list of slots for range (timezone)" state. [Weekly Pattern Executer]
Update 09.12.24 - Version 1.30.0
Fixed exclude expired google events for action "Get Slots For One Date".
