Calendar Time Slots

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

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

  1. Get Slots - Return slots for one day.
Image without caption
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.
Image without caption
Image without caption

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

  1. 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.
Image without caption
Fields:
Title
Description
Type
Day
Day for which slots are generated.
date
  1. Get Slots For Range - Get slots for the indicated range of dates.
Image without caption
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.
Image without caption

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

Interval Generator

Converts dates or text to the correct time interval for the plugin.
Image without caption
Image without caption

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

  1. Slot - This data call is used to specify Slot Type fields for plugin elements.
    1. 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.
  1. The One Day Pattern Generator element is placed on the page with the following completed fields.
Image without caption
Image without caption
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.
  1. Also, on the page, is placed Text element with the One Day Pattern Generator pattern state.
Image without caption
  1. To have access to the List of Slots states, on the page, used the Get today slots button.
Image without caption
  1. 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.
Image without caption
  1. The List of Slots states are listed, so these are used in two Repeating Group elements.
List of Slots as text:
Image without caption
Image without caption
List of Slots as date:
Image without caption
Image without caption

Using Weekly Pattern Executer

This workflow example represents how the Weekly Pattern Executer element is used and its actions.
  1. On the page, it is placed the Weekly Pattern Executer and 7 One Day Pattern Generator elements with the following completed fields.
Image without caption
Image without caption
Fields from Booked slots are optional.
  1. To have access to element states, on the page, are used Get Time Slots for date and Get Time Slots for date range buttons.
Image without caption
  1. 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.
Image without caption
The Day field from action is filled from an AirDate/TimePicker element.
  1. The List of slots state is a list, so this is used in the Repeating group element.
Image without caption
Image without caption
  1. 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.
Image without caption
The Dates range field from action is filled from an AirDate/TimePicker element.
  1. 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.
Image without caption
Image without caption

Using Interval Generator

In this example, it is represented how is used Interval Generator element.
  1. On the page, it is placed Interval Generator element with the following completed fields.
Image without caption
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.
  1. Also, on the page, is placed Text element with Interval Generator interval state.
Image without caption
Image without caption
💡
Interval Generator Interval state value may be useful for the One Day Pattern Generator element in the List of intervals (text) field.

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.