🔗
Link to plugin page: https://zeroqode.com/plugin/calendar-time-slots-1651737643910x893777033886920200
Demo to preview the settings
Introduction
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: One Pattern 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) |
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 |
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 |
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) |
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 |
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.
json[ {"_p_Start Slot":1637132400000,"_p_Stop Slot":1637135100000}, {"_p_Start Slot":1637136000000,"_p_Stop Slot":1637138700000}, {"_p_Start Slot":1637139600000,"_p_Stop Slot":1637142300000}, {"_p_Start Slot":1637146800000,"_p_Stop Slot":1637149500000}, {"_p_Start Slot":1637150400000,"_p_Stop Slot":1637153100000}, {"_p_Start Slot":1637157600000,"_p_Stop Slot":1637160300000}, {"_p_Start Slot":1637161200000,"_p_Stop Slot":1637163900000}, {"_p_Start Slot":1637164800000,"_p_Stop Slot":1637167500000}, {"_p_Start Slot":1637168400000,"_p_Stop Slot":1637171100000} ]
Data returned from this element.
Interval Generator
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.
Element Events
Title | Description |
Access token is ready | This event is triggered when the access token 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 |
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. | text |
Returns:
Please consult this Google documentation.
- Get Google Calendar List - Get the list of available calendars from Google Calendar.
Fields:
Title | Description | Type |
Authorization | The call authorization. Use the “Bearer ” + “access token” state from the “Google Access” element. | text |
Returns:
Please consult this Google documentation.
Plugin Action Calls
- Create Google Calendar Event - Create a Google Calendar event.
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 |
Authorization | The call authorization. Use the “Bearer ” + “access token” state from the “Google Access” element. | text |
Start Time | The start time for the event into the "yyyy-mm-ddThh:mm:ssZ" format. e.g. 2023-05-29T09:00:00Z. | text |
End Time | The end time for the event into the "yyyy-mm-ddThh:mm:ssZ" format. e.g. 2023-05-29T11:00:00Z. | text |
Title | The title of the event. | text |
Description | The description of the event. | text |
Returns:
Please consult this Google documentation.
- Create Webhook - Create a Google Calendar webhook.
❗
For this action need to create a backend workflow.
⌛
Created webhook is available for 7 days. After this time need to create another webhook.
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 |
Authorization | The call authorization. Use the “Bearer ” + “access token” state from the “Google Access” element. | text |
URL | The address where notifications are delivered for this channel. | text |
Channel ID | A UUID or similar unique string that identifies this channel. This value is used for deleting an existing webhook. | text |
Returns:
Please consult this Google documentation.
- Delete Webhook - Delete an existing webhook.
Fields:
Title | Description | Type |
Authorization | 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.
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 Weekly Pattern 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 Weekly Pattern 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 Interval Generator interval state.
💡
Interval Generator Interval state value may be useful for the One Day Pattern Generator element in the List of intervals (text) field.
💡
Dema page with the use cases described above: https://zeroqode-demo-25.bubbleapps.io/version-test/calendartimeslots_usecase
How to get Google access token
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.
Changelogs
Update 23.01.24 - Version 1.17.0
- Update booked slots on changes
Update 12.07.23 - Version 1.11.0
- Replaced actions with the "Google Access" element.
Update 12.07.23 - Version 1.10.0
- updated description
Update 21.06.23 - Version 1.9.0
- Added synchronisation with the Google Calendar
Update 19.06.23 - Version 1.8.0
- Updated the description
Update 23.05.23 - Version 1.7.0
- Added "Get Slots from 1st Day & ends 2nd Day" action for "Weekly Pattern Executer".
Update 23.03.23 - Version 1.6.0
- Fixed "One Day Pattern Generator" and "Weekly Pattern Executer".
Update 25.01.23 - Version 1.3.0.
- Removed "Range Slots Decoder", optimized one-day & weekly pattern elements, and updated docs.
Update 09.05.22 - Version 1.2.0.
- Updated icon and added common part.
Update 08.12.21 - Version 1.1.0.
- Added the possibility to set intervals using a list of ranges.
Update 22.10.21 - Version 1.0.0.
- Initial Release.