New Plugin: TopCal - Dates, Ranges and Time Slots

This is likely the cause of this issue. Are you able to contact the Plugin dev to see if they can update their JS Library?

Thanks Geoff, did this and will update here.

Did you find a solution to this? Another user is having this issue as well

Hi Geoff,

Yes, the developer of parallels plugin updated it and the conflict was gone

1 Like


I have been playing around with your plugin and its really great, however I have an encountered an issue with load speeds, specifically when I try to move back and forth between months.

As I understand, when the page is loaded, the getavailbleslots element is loading all the availableslots for the month (in some cases that can be 500 more items in an RG as it includes multiple slots for each day), which I think is causing a drag when I switch between months as each new month’s available slots must be loaded.

Initially we only need the availableslots to highlight which dates are available so that we can then visually represent them as available i.e with a blue background.

Rather than load all the available slots for each day in the month is there something we can do to just load say the first slot for each day in the month (or check whether the first slot in a day is empty or not). That means we could reduce the RG of available slots to just 30 (one for each day of the month).

Have I missed a simple way to do this? Do you have any recommendations?

Originally I wanted to have the two getavailbleslot elements on the page, one would generate the RG for the first available slot for each day in the month( we can then look in this RG to set conditionality for each day), and the other would generate the available slots for the specific day that was just

Any thoughts would be appreciated. I am finding manipulating lists of numeric ranges particuarly challenging.

HI @gf_wolfer

First of all a great plugin for scheduling meetings.

all i want to know if i create time slots in my time zone will the user with another timezone see all the slots according to his/her time zone?

erghh of course that wont work as we need the data in full in case there are changes in the timezones. back to the drawing board

Load speeds are always a unique challenge and vary greatly based on the app setup.

The longest to load is almost always the Bubble Data that you are feeding into the plugin and often just the visual part of the repeating group. The plugin does take time to run as well but Bubble data is usually the ‘heaviest’ part as the plugin waits for the Data to load from Bubble’s servers. So that is where I would look first.

Some tips:

  • Only load the Data you need into the plugin, as an example if you are looking up Bookings to remove timeslots, make sure you are only loading Bookings for the month showing and not every Booking in your system (same with specific date times and blocked dates, only pull down ones needed)
  • In the case of changing months, You can ‘pre-load’ Bubble’s next month data on the page so that part does not need to load it from Bubble’s servers when you move to the next month. This might sound counter to the above, but you can load this data somewhere outside of the Plugin (like in a group) and reference it when you change months. The plugin code still needs to run, but at least it will not need to wait for Bubble data to first load before it can run. Or you can have a second GetAvailableTimes element and make sure you alternate to the correct one as Months are changed
1 Like

Depends on your app exactly, but for most Calendly like applications I don’t think separating things out would help much and could lead to other annoyances - like the timezone issue

great pointers - appreciate you taking the time to answer in detail. I like they idea of pre-loading the next month. this makes sense

i do notice that even calendlys calendar as a momentary loading spinner when moving between months.

Exactly, and think of how many millions they have spent on development.

We need to have realistic expectations with the data and speed capabilities of this type of system. That said, we definitely want to optimize it as much as possible. Also, adjusting the UI or UX can help as well - slow transitions with ‘skeleton’ placeholders instead of moving the month quickly and a blank slate for 3 seconds gives a ‘quicker’ feel even though it is the same time

@karan_trivedi248 Thanks!

Yes, this plugin is specifically designed to work across all time zones. You can test it out in this Template which uses the plugin →

You still need to be careful when building with the plugin though, as you need to make sure you are displaying dates back to the User correctly since you can format dates to show in any timezone and it can be easy to make mistakes or be inconsistent with this

1 Like


My app currently uses Air Calendar (Full Calendar) for the users to self schedule events into their own calendar.

We are looking into options on creating a functionality where outside “clients” will be able to access this user’s availability and schedule themselves into the Calendar based on the availability.

We are open to different ways on how to do this, whether it is the user setting monthly available dates and times (timeslots) where the clients can register into, or having the client access the user’s calendar through a link and self schedule , just like if it was the user scheduling an appointment into his calendar.

Any advise on how to develop this functionality with the current setup that we have?

@aguilar.josedavid Sounds like a good use case for the plugin and it could definitely help.

You would essentially be adding on this template’s functionality to your current app -

Most of the data structure from that app is available for free in this example app, so you can get an idea of how the Plugin works. And in this example you can look at how the Bookings Data is used to filter out available times - these Bookings could be ones made from a client and also by your User so that it works from both sides

Is this compatible even when I’m using AirCalendar? I would think the plugin you recommend adapts to TopCal Calendar better …(?)

I do not know that plugin but I believe it is just a Calendar plugin to show event on it. In the Template link I sent you can see how the Admin might want to view their own calendar in that style, but then when they offer a public calendar for people to book on you might want a calendar styled similar to the one on the Top Cal example pages (similar to Calendly’s style). So I wouldn’t use them ‘together’ but I would use them in the same app depending on what the UX calls for.

Hi @gf_wolfer . i have bought your plugin but want to discuss some functionalities if you have time can you drag me to pm so we can discuss there?


Sure, you can send a direct message to my profile here in the forum

Could we build a system similar to rovers

I am not sure what rovers is. Do you have more info as to what it is?