Full Calendar Plugin - How to display AVAILABLE dates and times?

Need help
1

I’m building a booking app for a client’s rentable multi-use space (think Air BnB but for a dedicated space).

I’m using the Full Calendar plugin from Bubble, but I want users to only see AVAILABLE time slots, not reserved time slots (I have a DB table called “Reservations”). Other than creating a type of thing called “Available Dates and Times” which would be a ridiculous data model, is there a hack to get the calendar to do some sort of “reverse” display so that dates and times which are NOT overlapping with dates and times in a database table get displayed?

From a UX standpoint, no one cares about what time slots were reserved. They just want to see what is available.

Here is a screenshot of the current display, which is using Reservations as a datasource.

calendar
calendar1928×1054 114 KB

2

Hey @timothymoore1 ! I’ve run into this before, the Full Calendar plugin doesn’t natively do “show only free times,” so you need a workaround. A couple options:

  1. Generate available slots dynamically
  • Instead of storing every available slot in the database, you can calculate them on the fly:
    • Have your calendar’s datasource be a repeating group of all potential slots (e.g., every 30 min / 1 hour).
    • Filter out any slots that overlap with a Reservation.
  • This way, you only show the times that are actually free, without creating a huge “Available Dates” table.
  1. Use conditional formatting
  • If you don’t want to generate all slots, another approach is to highlight available slots and gray out reserved ones. It’s not exactly hiding reserved times, but it’s easier to implement.
  1. Custom plugin / API
  • Some people use a small backend workflow or API that takes your “Reservations” and returns only free ranges. Then feed that to the calendar.

Basically, the key is filtering your datasource so the calendar only sees free times, you don’t need to store every possible slot permanently.

If you want, I can sketch a simple workflow example for calculating available slots dynamically, it works really well with Full Calendar. Hope this helps.

1 Like
3

@connect10 Option 1! …I don’t know why I didn’t think of this. I’m literally face-palming right now. I already have a “GlobalTime Slot” DB table to support this approach.

I’m going to re-configure this and let you know how it goes. I’ll update this thread to confirm if option 1 worked.

Thank you @connect10

4

You’re Welcome :slightly_smiling_face:

5

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