How to create a range of times in a column

Questions
1

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

1 Like
2

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

  1. Install the List of Numbers plugin.
  2. Add a Repeating Group where each row represents a time slot.
  3. 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).
  1. 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:

  1. Create a Time Slot data type with fields:
  • time (Date/Time)
  • session_id (Text) (optional, to group generated slots)
  1. Run a backend workflow to generate and store the slots when start/end time is set.
  2. 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

1 Like
3

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