New Plugin: TopCal - Dates, Ranges and Time Slots

Also the plugin is considering the availability of the person to be booked but not that of the booker, is this correct? If so, how to change it so it also filters out the booked ranges of booker when showing the available time slots?

Just letting you know that I see this but will need a day or two to get back to you on everything

Hi @gf_wolfer,

I’ve used your plugin in a few projects and it’s always the best calendar available :wink:. Congrats!

I have a question for you (maybe already asked, but I couldn’t find it). Let’s say we have a two sided app (mentors and mentees, customers and consultants, patients and doctors, etc.). There is a use case that is coming up for a client of mine that should work like this:

-) a customer user is looking for a professional service to book in his area (piano lessons, house cleaning, gardening, etc.).

-) in that area there are 5 suppliers and each of them has a personal schedule (with bookings, specific availability, dates blocked, etc.)

-) the customer user wants to pick a time slot first and then list all the suppliers available in that time slot.

How would you achieve this goal ? It’s like we need a super “GetAvailableTimeSlots” element that can read a list of weekly patterns. Or maybe there is another way to do it with the current plugin ?

Looking forward to hear from you (here or in DM if you like).



1 Like

For a Weekly Calendar, you will want to use the Top Shelf element called Create a List of Dates and replace the Calendar Dates with it. The you can use the same Calendar UI with a few minor adjustments, the element would look like:

And for the Workflows on the weekly toggle you would add and subtract 7 days, instead of a Month Offset that is used on the monthly Calendar

Regarding the excluding of times, the Plugin finds all Availability Time Slots for the inputs then removes Blocked Days. The last ‘step’ of the code is removing the Time Slots that fall within Booked Ranges and Time Slots that fall within the Booking Time Length added on to the start of Booked Ranges to make sure a new Booking won’t overlap with an existing one

Correct. Taking the Booker’s own schedule into account would take some creative logic, off the top of my head you would need to also load on the page the Booker’s Available Time Slots in a separate Get Available Times element and then use the result of the 2 Get Available Time elements to find overlapping times


You have the right idea, that the Get Available Times element is for a single User/Schedule - so in this case we need to have a Get Available Times element (or Workflow Action) run for each of the service providers.

You can do this with a repeating group on page and using the Orchestra Plugin to run this data in multiple Get Available Times elements at once, more about this is described here

Or the same logic can be done using a Recursive Loop and the Workflow Action Get Available Times - running through each provider to get there availability, and then filtering out if there is a time on the searched time

Another option that might be desired if Searching via Time Slots is a major feature of the app would be to actually save Available Time Slots directly as Data for the schedule, then searching would be simpler and faster. But then you need to make sure you are properly updating the Available Times with every Booking, Cancellation, Schedule change with a backend workflow

Any ideas why the GetAvailableTimeSlots element is not returning any dates in my case? Under Properties it does look like a date range is properly produced. I’m pretty sure I have it set up just like in the example editor

Thanks for showing the Properties, made this easy to spot.

The Booking Interval and Booking Duration are set to 600 minutes (10 hours) - meaning there needs to be an open range of at least 600 minutes to have a time slot that can accommodate that booking. The Monday pattern only has availability for 540 minutes (9 hours).

You can shorten the Minute Interval and Booking duration or make more availability

1 Like

Thanks, easy fix

Hey I need to add a buffer like Calendly has. Ex. Invitees can’t schedule within 4 hours of current time.

I tried using the Between These Dates setting for the GetAvailableTimeSlots object I use. I set Between Dates Start at Current Date/Time + Buffer. Thing is that if the start of that range interlaps with the next day at all, the whole day is not shown as available.

Ex. It is 9PM Thursday right now and I have a buffer set of 4 hours. Since the next available slot would be 1AM Friday, all of Friday is being blocked despite me having availability for the whole day Friday (1:00AM-8:00PM).

How would be the proper way to add a buffer?


I recommend adding this type of Booking in Advance logic directly to a Calendar or Time Slot list.

So you would use the Get Available Time Slots element normally, and then filter it’s results to exclude Time Slots that are within that un-bookable time. The plugin gives you more flexibility when you pull in slightly more time slots then you directly need, and then you can fine tune exact filtering within your own logic instead of the Plugin’s logic - and the performance is essentially the same.

An example of where I would add this type of ‘hours in advanced of booking logic’, and use the same constraints when you display the List of Time Slots when the day is clicked:


Got it! Adding the filter there actually didn’t fix it but once I added it to the action where I “Display list” in the shown time slots, it worked. Thanks for the help!

1 Like

Hi @gf_wolfer, I just installed the plugin and cannot figure out what causes the date format to change when you add availability? It’s probably right in my face, but I’m new to Bubble.

Topcal Specific Date

Topcal Calendar


Look for the red flags in the Editor here as those elements have Conditions on them to make the Date format to change where there is availability

Man this is a great plug in, thanks again for making it.

Is it possible to have different booking durations for different days on either the weekly availability or specific dates?

1 Like

It is but you would need to get creative with how you want to do it.

It is common in a Booking system that someone first selects a Service type, which may be a specific length of time, and then they can see what days they can book this on. So you would fill in this data before showing the Calendar Availabilities.

A great part of this plugin is that when the Booking Duration is changed it will update the Get Available Times element in real time, an example of what I mean can be seen on this home page demo page:

So if this type of UX works for your use case then I would recommend that. If not then you may need to have more than one Get Available Time elements on the page at once


Thanks for the reply @gf_wolfer ! Now I’m getting this error after adding the Display Data workflow. Any idea why? When I remove it, I don’t get the error.

Topcal Error Msg

Topcal Display Data

Hard to say for sure without seeing more or accessing the page, but the plugin may be looping causing the page to crash.

Double check that the following fields in the Get Available Time Slots have values and are not empty - even if you have a dynamic value but they are an empty value it can cause this, so try typing in a value directly to see if that is why it was cashing

If not DM me a link to the page and I can take a look

Thanks @gf_wolfer ! That’s exactly what the issue was.

Ok, more questions/issue… I can now see the date highlighted on the calendar when I post availability in my simple app, but when I refresh the page, it goes away;

You can see that all the dates I posted are still in the database and are showing up in the RG;