Selecting minimum number of hours and visually block them out

Hey there,
I’m working on a booking system and I currently have spaces you can book for a minimum number of hours.

My issue is that I can select the starting time block, which highlights, but then with the way I’ve built it, you can choose a random time later to make up your 2nd, 3rd hours etc. I need them to be sequential hours, so selecting 9am blocks out 10am too (on a 2 hr min space), or selecting 9am blocks out 10am and 11am too (on a 3 hr space).

To confirm, when the first block is selected, it changes two states:
starting-block-selected: becomes YES
listing-slot-selected (number): becomes +1

Here’s a quick recording of the UI in action

ezgif.com-gif-maker (2)

You might need some extra custom states and use conditionals.

So when the second timeslot is selected (you might need to have a selected timeslot list state and get min & max values), then do simple math ‘selected timeslot :max - selected timeslot :min’, add that number to a state like ‘timeslot difference’ and then compare that number with the current cell’s number (selected timeslot list :max - current cell’s timeslot < timeslot difference) then do the styling that makes it look selected.

You could also use that comparison to let the user know if they have selected an ending timeslot that’s too long etc.

This is all theoretical, I haven’t actually tried it - and someone might have a more elegant solution they’ve tried and tested :slight_smile:

thanks so much @equibodyapp - I was skirting around something similar but I just can’t seem to get my head round it. Does timeslot need to be an integer then, or does it have a numerical value by its nature?

Hello,

I don’t have much experience on bubble but might run into the same issue so i’d like to share my though worst case you’ll have the topic show activities and attract other readers :stuck_out_tongue:

anyway,
I had the same idea but my concerns is for user who’d like to book two time slots at the same time one from 9 to 11 for example and another from 14 to 16. What logic would you use ?

@emma1 : I’ll probably use the same workflow in the future, what I would have add on yours will be “if 10 is the first time hour booked then open up the 8 to 10 time slot. or send notification to “the person providing to service” to open or not the 8 to 10 slot.”

You tell me :slight_smile: I’m assuming there is some sort of number saved on the timeslot data type? If not you would have to add it in :slight_smile:

@pro.kaddouri that would be a bit more complex as you sort of need 2 separate lists…can you simplify it by getting someone to book one timeslot at a time? Like pick one, and then when confirming ask if they’d like another timeslot? Or have one RG for first time and another RG to pick second time?