Creating Recurring Time Ranges For Multiple Dates

I am trying to create a scheduling app like Calendly where an admin user can create a recurring list of available slots for public users to book. I know how I can brute force this by just creating a database entry for every available slot and displaying those in a repeating group, but I am wondering if there is a simpler way to display the availabilities client side. What I am trying to do is set a range of times, say 9AM to 5PM, for each weekday, and then have that apply to each weekday as it’s selected e.g. when any Monday is selected, show the range of times of availability that is defined for Mondays.

I believe a date range is the best way to accomplish this, but the problem I’m running in to is how to extract just the times out of a date range to apply to any future day, as a date range is specific to a date. Or I can save the availabilities as a numeric range instead, like [0900,1700], but then how do I convert that back into a date range on the client side?

Hi Ben37,

Interesting architectural problem. Here’s how I would approach this:

  1. Have the user state a start time and end time (i.e. start = 0900, end = 1700) (I think you’ll have to extract the hours in the element editor)
  2. Client-side have it highlight/shade in time slots that are > 0900/starttime and < 1700/endtime.

The trick here is that Bubble saves date times, so you just have to do :extractHours to get around it. Even though it will feel like you are assigning a specific date. Same thing for Date ranges btw.

Let me know if this makes sense!

I tried a few different ways and easiest solution has been Topcal. They have a demo editor with the exact components for a Calendly clone. Worth the $8 i spend each month on it. Here’s the link (ignore the preview text since Bubble has a bug right now) Suspected phishing site | Cloudflare

I think :extract hours is exactly what I’m looking for. I was having difficulty understanding it because it outputs to a number, but I can use it to build start times and end times with a :change hours to function on a date. Thanks!

Yeah I wanted to see if I could build this myself without spending the money, we’ll see if I can figure out or just bite the bullet and pay for Topcal.