New Plugin: TopCal - Dates, Ranges and Time Slots

The Workflow for ‘GetAvailableTimeSlots’ is run on the server vs. the on page element which runs client side. So this allows you to run the workflow in a Backend Workflow or to run it in a ‘loop’.

It performs the same function as the on page element and doesn’t create any data, it just reads and returns a list of available time slots. In most cases if you want to show on page availability for a single ‘Calendar/resource’ I would suggest the Element as it is quicker and updates each time a field within it is changed.

Some specific cases could be:

  • You want to save time slots directly on a resource to make them more easily searchable, you would have an ‘update times’ backend workflow that updates the time slot list every time the Calendar/Resource is changed
  • If you want to run a loop and look up availability of many Calendars/Resources at once (similar to what I have described in this thread topic when using the Orchestra plugin, but in a way that can work on a backend)
  • You can setup an API that when it get’s pinged it returns the list of available times
1 Like

Hello,

I used the TopCal plugin to develop an application with an agency plan.
Once the application passed on a personal plan and bought the plugin.
No time slot data is visible and there is the following error message:

The plugin TopCal - Dates, Ranges & Time Slots / element Get Available Time Slots threw the following error: ReferenceError: luxon is not defined
at eval (PLUGIN_1614827714366x678015935299977200/TopCal—Dates–Ranges—Time-Slots-update–Get-Available-Time-Slots-.js:49:21)
at https://plateforme.mapetiteassiette.com/package/run_debug_js/8fbfaee3bf68a0280d555920a48e32cb59579bdbd04c0a25066158a471c9e4d6/xfalse/x20/run_debug.js:6:2579395 (please report this to the plugin author)"

So how can we fixe it ?

Thanks

Hello Raphael I just replied to your email before seeing this, so we can discuss things there

Hi @gf_wolfer ,

TopCal has been amazing! I recommend this plug in to anyone needing a good calendar booking system.

My only concern is that my users’ list of blocked and specific days available is getting long and I’m worried it will lead to longer loading times. How can I remove those blocked or specific dates from the database once the date passes? I would have thought something like this could work but I guess not:

Great to hear it has helped!

Good question that I thought I might have to address at some point. Using a List of Dates is good because we don’t actually have any data to delete, instead we can just Make Changes to the Schedule and use the Filter function to remove dates from the past. Like this:

1 Like

Hi gf_wolfer

This is my use case. Let me explain my doubt:

You mentioned “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.”

What i need is:

Lets see in practise: cliente choose service of 25 min the app shows

09:00 — free
09:25— blocked
09:50 — free

And so on…

Lets see in practise: cliente choose service of 25 and 35 min = total 60 min then app shows slots like this

09:00 — free
10:00 — free
11:00 — blocked
12:00— free

Can I solve my demand using your plugin?

Definitely seems easy enough. I think all you would need to do is combine the Time for Services into the GetAvailableTimes ‘Booking Duration’ field, this field is just a number so you only need to come up with the correct expression or logic to feed in the total booking time

Hi @gf_wolfer,

I am playing with the plugin now. Have there been any updates to have it work for multi days bookings ?

I am building an app like airbnb for parking spots and I would like each spots to input available timeslots on each day day of the week. Then the search page should take these timeslots into account, whether it is a booking for a few hours or a few days.

Is it possible with Topcal ?

Thanks

There is not a specific functionality built into the plugin for this that I have tried, but I think it could work here. Have you tested the plugin for this use case yet?

Hi @gf_wolfer,

Yes I am playing with the plugin right now but I have trouble seeing how to make it work.

As I understand the plugin works only with timeslots with a given duration.

But in my app users can choose to book for one hour, 5 days, or whatever duration they want.

Topcal plugin can be useful to give a parking spot available numeric ranges based on the day of the week.

But if we now look at the search page for users (think airbnb’s search map) than it becomes a mess to filter everything. Filters would look like "if extract day from desired date range contains 1 and 1 is first day of the range, then exclude list of parking spots whose monday’s available range overlaps with first day of the range numeric range*

i’ve tried it this way, it works fine with 2-3 entries but with hundreds or thousands of entries it will take forever to load.

I you have an idea for a solution I’d be happy to take it :slight_smile:

Cheers

Correct the plugin needs a Duration to return times.

In your case is a Parking Spot always ‘default available’ unless it is booked/unavailable?
It may be simpler to structure the logic this way instead of a ‘schedule’ like a barbershop might have - so not needing the TopCal plugin (other than maybe some of the TimeZone tools)

Example, if a parking spot can be booked for X days it does not need a Monday - Fri, 9-5 type of schedule, but rather it is ‘always available’ to be scheduled minus any Booked Times and Blocked Days.

Now this does get complicated if they only want an ‘hourly’ booking of a spot and it can only be between certain times of a day. If this is the case you may want to have 2 different UX booking views - one for people who want hourly parking (use the TopCal plugin) and one for people who want multi-days.

Regarding the logic to get this type of search to work efficiently - unfortunately I do not have an easy answer for you. Ideally you will want to come up with logic that keeps the search on the Server instead of loading all the data on page and then filtering. Because if you need to search thousands of parking spaces, and each one has hundreds of bookings, then you are already in needing to process hundreds of thousands of pieces of data.

Maybe there is a creative way to efficiently store Booking data (maybe a list of time ranges instead of individual items) and coming up with creative searches using the ‘overlap range’ constraints

Hi @gf_wolfer ,

I’m encountering a bug when I use this function. I have a backend workflkow that runs every week. Every week on Friday it runs perfectly fine except at the last Friday of the month, it won’t search properly.

Step 1:

Step 2:

It must have something to do when a month changes over

When you are using the Between Start and End date fields make sure you change the Get Availability For dropdown to be ‘Between These Dates’

It is tricky to get a good UX in the Bubble Plugin popup, but I should add some notes or asterisks to warn users the between dates are only evaluated when the dropdown specifies it

1 Like

Easy fix, thanks!

Hello! I am trying to display the nearest available date, including if there are ones for today.

In the example, today is Tuesday, and as you can see, there are some times available on Tuesday, however, it is not taking them into consideration for the nearest date, it is displaying the second nearest one (Sunday, which is good), so, how can I change the filter to display this data correctly?


Captura de Pantalla 2023-05-09 a la(s) 12.38.54

It is difficult to fully understand what is happening with just that information. I would need more in depth details or video to help.

But as a guess here, it is showing the proper next open time. The times showing on the right hand side are on the 16th, not the 9th. So I would use the bubble debugger to check all of the times that the Plugin is returning and you can see what is the first time that way to verify

Sure so here is a better example, sorr about that: Loom | Free Screen & Video Recording Software | Loom
My 3 questions are:
1.- Can I use another input instead of the air/time picker
2.- Why are times being displayed at a random number instead of the ones I chose?
3.- How can I just pick a specific date and display those times from performing a search, not by clicking the date.
Appreciate your help!

1 - yes you can use another input type, but last I had looked there are not many that look good as a Time only input (the Bubble built one is not built for time only, only Date & Time). Some other examples I have used before use Dropdowns and maybe another free plugin time selector

2 - Looking at Nick Chubb’s (go Browns!) schedule in that video you can see the Time Range that saved is 292, 892. Since the the Time Range is essentially a Time of Day represented as Minutes from 12am, this schedule would be 4:52am - 2:52pm, which the plugin is properly producing.

The issue is in saving the time ranges. You should double check elements and workflows you have setup when you are saving the Schedule, as the Hours and minutes fields are not being set how you want them (8am to 6pm should save as 480, 1080)

3 - That list you are showing is showing every Avalaibale DateTime that the plugin is outputting that is greater than current date time. So you need to add a Constraint to also cap the date to the end of the day (if you want just today) to not include future days’ available times

To do that, add the constraint
Current Date/Time :ChangeHoursTo 23 :ChangeMinutesTo 59 > This Date

Oh are you a Browns fan? Hahaha Nice

#2 is what concerns me the most, it is just picking a random value and every time I try it again with the same hours on the same day it is a different number, is not even consistent with inconsistencies. What might be causing this bug?


I am not, but have often had Chubb on my fantasy team.

To test some things, go into the Preview Mode with the Debugger on.

Then once you set the times in the inputs, use the ‘Inspect’ button on the debugger to view the Expressions in the Set Availability element for the Start Hour, Start Minute, etc and make sure they look correct.
When inspecting this, you should also see the Values returned by the plugin element, these should be the Minute Ranges in the correct numbers.
Make sure you are inspecting this for the correct Day of the week and not mixing up the inputs (double check the names are correct for each day of the week)

If they are also correct, then you will want to run the workflow that saves these values to your database, but do this using Run in Step by Step so you can inspect the values that are being saved.