Seeking Advice: Displaying Time Availability Issue in Bubble.io Project

Dear Bubble forum colleagues,

I’m working on an online scheduling project using Bubble.io and we’ve encountered a specific challenge related to displaying time availability.

Currently, our system allows a barbershop to edit their list of dates with 30-minute timeslots. If only 2 separate time slots remain, such as at 1:00 PM and 4:00 PM, the other time slots are correctly hidden when they are occupied, preventing customers from selecting unavailable times. This is already working as expected.

However, when a user requests a service that takes more than 30 minutes, the space where these time slots would be listed remains blank because there are no available timeslots in sequence to accommodate 45 minutes, for example. This has led to complaints from another barbershop, as users interpreted this as a system issue.

To address this, we would like to display a message indicating that there are no available times on that day or period due to lack of availability, which could be normal if the client decreases the quantity of services that fit in one or the other available timeslot, at 1:00 PM or 4:00 PM. Currently, we are trying to use the technique of showing a group with the message only when the list of dates is empty. However, we’ve realized that occupied timeslots are invisible, but not empty.

Our goal is to ensure that customers are informed when the request cannot be accommodated, avoiding blank spaces in the user interface.

We appreciate any guidance or suggestions on how to approach this issue.

Thank you.

You’ll have to restrict the user to select time slots within the allowed time frame.
So if the user is selecting 45 mins at 1pm and 1 30 to 2 00 pm is booked. When the user selects 45 mins (ideally before selecting time) 1 pm should not be selectable.

Also set a standard time zone across your application. Bubble takes current user’s time zone which end up making things too complicated if people are in different time zones

1 Like

Hey @seckler.daniel, if you’re not already doing so, I’d recommend using Bubble’s date range data type, as it’s ideally suited to booking scenarios. There are a number of operators which make it quick and efficient to tell if 2 date ranges (time slots) overlap, intersect, etc.

You can leverage those operators to conditionally style UI elements to make it clear to the user which slots are and aren’t available, as well as make elements unclickable to prevent the user from scheduling a conflicting slot.

Good luck! :slightly_smiling_face:

This topic was automatically closed after 70 days. New replies are no longer allowed.