How to create a range of times in a column

bjess65 · 2025-03-05T06:49:50.045Z

What is the easiest way to display a set range of times in a column with the start and end time being adjustable?

sociosemp · 2025-03-05T14:08:31.268Z

Hey @bjess65 . I was writing an example that I worked with in the past. I hope it can show the solution of this function, below:

To dynamically generate a column of time slots where the start and end times are adjustable, the best approach is using Custom States and Repeating Groups. Here’s how to do it efficiently:

1. Store Start and End Times Using Custom States

Create two Custom States on the page (or a group):
- start_time (Type: Date/Time) → Stores the user-defined start time.
- end_time (Type: Date/Time) → Stores the user-defined end time.

These states allow dynamic control over the range without modifying the database.

2. Generate the Time Slots Using a List of Numbers

Since Bubble does not support looping workflows natively, we can use a plugin or a workaround:

Method 1: Using the “List of Numbers” Plugin

Install the List of Numbers plugin.
Add a Repeating Group where each row represents a time slot.
Set the Repeating Group’s data source to:

pgsql

CopiarEditar

List of Numbers: from 0 to (End Time - Start Time) ÷ Interval

Example: If start time = 08:00 and end time = 12:00, with a 30-minute interval, the list should contain 8 items ((12 - 8) × 2).

Inside the cell text, display the calculated time:

pgsql

CopiarEditar

Start Time + (Current Cell’s Index × Interval)

If Start Time = 08:00 and Interval = 30 min, the values will be:
- 08:00
- 08:30
- 09:00
- 09:30 … (until End Time)

3. Allow Users to Adjust Start & End Times

Add two Date/Time Pickers to let users select a start and end time dynamically.
When a user updates a value, update the respective Custom State.
This will automatically refresh the Repeating Group, regenerating the time slots dynamically.

Alternative: Using Database Storage (If Needed)

If you need to store the time slots persistently:

Create a Time Slot data type with fields:

time (Date/Time)
session_id (Text) (optional, to group generated slots)

Run a backend workflow to generate and store the slots when start/end time is set.
Display stored slots in the Repeating Group.

This approach is useful if users need to save their time selections for future reference.

For resume: * For fast and dynamic time slot generation, use a List of Numbers + Custom States.

If you need to store the time slots, generate them via a backend workflow and save them in the database.
Use Date/Time Pickers to let users dynamically adjust the range.

This method ensures efficiency, real-time updates, and user flexibility without unnecessary database writes.

If you have a doubt, send me message on DM

bjess65 · 2025-03-06T02:52:52.017Z

Are you using the toolbox plugin to get the list of numbers?