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, Range Slots Decoder (for v1.2.0 and older), and Interval Generator.
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 |
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 |
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
Changelogs
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.