How to only show available time slots in a dynamic booking system?

Need help
1

Beitrag:

Hi everyone,

first of all, i´m new to bubble and still learning.

I’m building a booking system in Bubble and I’m trying to figure out the best way to only show available time slots.

My setup:

  • I’m using an Option Set “Time” (15-minute intervals)

  • A booking (“Termin”) has:

    • a start time

    • a service with a duration

Goal:

When a user selects a service and date:

:backhand_index_pointing_right: I only want to show time slots that are actually available

Example:

  • A 60-minute booking should block multiple slots (10:00, 10:15, 10:30, 10:45)

  • These slots should no longer be selectable

Question:

:backhand_index_pointing_right: What is the best way to handle this dynamically in Bubble?

  • How do I make sure only free slots are shown?

  • Should I use Option Sets or database entries for time slots?

  • What’s the recommended approach for this kind of booking logic?

  • Are there any plugin´s that solves my problem?

Thanks a lot for any help :raising_hands:

2

No matter what, dont create a database entry for each booking slot. That’s a great way to have useless database records.

Instead, you should have database records for booked appointments, which then tells your UI what they cannot display. This makes it so that when someone wants to cancel their slot, your system doesn’t have to do anything new to display that slot as now open.

  1. UI searches for appointments given the parameters (start date to end date)
  2. UI displays everything as free, except where there is already a booking
  3. User can select the slot they want because they know if it is appearing to them, there is nothing in the db in this place.

Also keep in mind about user privacy. You might want to have an appointment details and appointment slot as different data types, that way the UI can safely query for slots without exposing booking details.

3

Hey there an welcome to Bubble!

You can checkout my plugin (TopCal) built specifically for this use case and used by thousands of apps.

I have an example app that you can explore as well as a couple of videos. The best way I have found is a mix of structuring your Data and Option sets in conjunction with a plugin like TopCal

Example page with videos:

Bubble Editor access:

Forum Post with a lot of common questions and answers

4

You can check out free template powered by paid plugin that is a complete end to end booking and scheduling platform like Calendly