Client-Side Integration:
Step 1: Add the Pro TimeSlots Scheduler Element to Your Page

Begin by placing the Pro TimeSlots Scheduler element onto your page. This dynamic component serves as the foundation for creating and managing time slots with precision.

Step 2: Set TimeSlot Duration (in minutes)

Define the duration of each time slot by specifying the desired number of minutes. This flexibility ensures that the scheduler accommodates a variety of scheduling needs.

Step 3: Set Overlapping

Determine the number of allowable overlapping time slots with already booked date ranges. This feature adds a layer of flexibility, optimizing the utilization of available time slots.

Step 4: Set Date Range Availability

Configure time slot availability by defining dynamic date ranges. Create multiple date ranges for each day, such as working hours before and after breaks. The Pro TimeSlots Scheduler allows you to tailor time slots to fit any schedule seamlessly.

Step 5 (Optional): Set Date Range of Booked/Closed TimeSlots

For added sophistication, input a dynamic list of date ranges representing already booked or closed time slots. This ensures your scheduling system accounts for existing commitments, providing a comprehensive view of availability.

Step 6: Display Results with a Repeating Group

Enhance user experience by displaying the results of configured time slots using a repeating group. Bind the repeating group to the Pro TimeSlots Scheduler element, allowing users to easily view and interact with the generated date ranges.

-----------------------------


Server-Side Integration:

Step 1: Initiate Workflow Action

Instead of adding the element directly to the page, trigger an action in a workflow for server-side control and flexibility in managing time slots programmatically.

Step 3: Set Overlapping (Server-Side)

Like client side

Step 4: Set Date Range Availability (Server-Side)

like client side

Step 5: Set Date Range of Booked/Closed TimeSlots (Server-Side)

like client side

Step 6: Retrieve Results in Workflow

After initiating the server-side workflow, use the "previous action operator" to retrieve results. This integration ensures that server-side processes seamlessly provide actionable data for further operations within your bubble application.