New Plugin: TopCal - Dates, Ranges and Time Slots

Thanks!

It’s hard to say exactly with that info as I don’t see anything obviously off. If you want you can DM me your App editor and a description of which page this is on and the best way to test it quickly while in debug mode with this data.

Cheers

2 Likes

Thanks for the quick reply. It seems it was a problem from my end, I mixed the timezones (current user’s timezone and a dynamic selection I have added). Now it works great!

Hi @gf_wolfer, a quick question for you. As far as you know, is the TopCal Plugin affected by the newly released Bubble “Date Parsing” feature ? Thank you.

Stefano

PS: for those who haven’t seen the announcement, read this [Breaking Change] Date Parsing on the Server

Thanks for bringing this up, I will do some more research into this today to be certain but at first glance it should have no effect.

I am pretty sure the plugin manipulates dates in the plugin code and then produces a standard Bubble Date (or Date Ranges) - or at least would always have specified a time zone. I will double check later and report back for sure as I know this could be a breaking change though

1 Like

After testing this out the Plugin is all good and not affected by the Date Parsing change.

There was one area I thought it could be, which is the Get Available Times workflow action, as that runs on the Bubble Server. But it is all good, Bubble sends Dates to the plugin in UNIX time (milliseconds) and the Plugin puts out the Dates in Unix as well so Bubble can easily read it.

I would caution though that if you are a user of this plugin then you likely deal with dates in other areas of your app, so you may be more likely to experience an issue with that change compared to an average Bubble user.

An example would be if you are pulling in API data, such as Dates from a connected Calendar, and feeding that data in the plugin to find available times. In this case you would want to double check that before the data goes into the Plugin that it is correct with the API source dates

1 Like

HI @gf_wolfer , thank you so much for your time and your advice. Yes I am a user of your plugin in all my clients projects and I am very happy with what it does :slightly_smiling_face:

1 Like

Hi @gf_wolfer, just have a couple questions about setting the calendar dates element in the schedules time zone.

Seems like it cuts off the 1st or last day of the month when I just set the calendar dates to the schedule time zone. Or when you set the calendar dates element and get time element to the schedules time zone, throws the calendar days off. Even if I change the calendar elements to read in schedule time zone.

Also when when creating specific dates in a schedule to a time zones id as you have it set in your test page. Does that save the time against the users browsers location?

I’m having trouble when the time differences are +/- 12 hours



You are referring to the ‘Calendar Dates’ TopCal element, correct?

My best guess with the limited info I have here:
If you are generating a list of Dates to build out a Calendar in a specific time zone, make sure that those Dates in the repeating group - the number saying 1 (2,3,4,5…) are formatted to show the date in the same time zone as the Calendar Dates time zone. If you copied the Repeating Group calendar element from elsewhere those numbers are defaulting in the Current User’s time zone which might be causing this issue. If not that, maybe the Issue showing in the debugger is related

Which test page are you referring to? This one → TopCal Plugin ?

On that test page you can set the Schedule to be in any timezone you want - I just give a list of a few time zone names in the dropdown, but it could be any of the hundreds of IANA time zones (canonical ones listed here)

@gf_wolfer I have the text elements in the calendars repeating group set to the schedules time zone. But it seems like the issue is that the date and the calendars repeating group are at odds with each other. The repeating groups data source is a different date then the text element in the repeating group.




It looks correct but I understand how it is confusing. When you view a Date in the Debugger, the Debugger will always show you the Date in your current Browser’s Time Zone.

So when you see Jul 1 at 4pm (your browser time zone), that time is the same moment in time as Jul 2 at 12am in your target schedule’s time zone - I would need to know the time zone to confirm this, but it appears your schedule is in a zone 8 hours ahead

A visual issue here though is the Condition on the Calendar Number Text (of the group holding the text) that is hiding the 1st number from showing.

Hi @gf_wolfer, question here. Can I use this plugin with this specific use-case?

USE CASE:

After a timeslot is booked, the timeslot is tagged as pending or confirmed.

If the timeslot is CONFIRMED, then it will be removed from the list of available timeslots.

If the timeslot is PENDING, then it will still show in the list of available timeslots but show a warning that states that there is already pending booking on that date, would you like to continue?

Another USE CASE:

  • I have 3 rooms. I want to block the date and time, only when all the 3 rooms are booked at the same time. However, when some room is available for that time and date, how to show the remaining slots for that specific date? (this gonna have to be dynamic since many clients will have different amount of rooms.

Definitely. Compared to any examples I have, you would just need to add some other items to your Data and Searches.

For Use Case #1

  • Add a Status field to a Booking
  • When searching for Booked Times to insert into the TopCal Get Available Time element, add the parameter to only find Bookings with a Confirmed Status
  • In the List of Available Time Slots, or when a Time Slot is selected, have a Condition which is a search for Bookings with the exact same time and the Status is Pending, and show the warning as you would like

Use Case #2

This is more advanced and there could be different ways to do it. I know a couple of ways and maybe others can come up with other creative ways.

One way is to use logic like is described here, which essentially pulls the list of rooms all at once, and runs the Get Available Times for each room and then you can use logic to say when there is at least one time slot on that day.

Another is to run the Get Available Times workflow in a Backend Workflow and to save every available time slot on a piece of data - this will also require that you make sure you properly edit the Available Time list every time a booking is made, cancelled, availability changes, etc. But is more optimal for advanced searching of times.

Hi, thanks for this. For use case #1, How can I search for Bookings that start time is within booked date range but is pending? Not specifically same start time, rather, overlapping schedule?

For use case #2, I will try your solution with the help of the orchestra plugin. :smiley:

The Search would look for Bookings where the Time Slot is greater or equal to the Booking’s Time and Less than or Equal to the Booking’s End Time, and the Booking is Pending.
Or you could use Bubble’s Overlap function with Date Ranges

Hi Rod,
I’m trying to use the Google API for freebusy just as you were describing and I’m having the same issue of not being able to change it to a date range. Could you provide any more information on how you solved this with a backend workflow?

So whenever the booking window is booked, I run a workflow to schedule a workflow on a list:

Then the businessUser has a field called tempBusy that stores time ranges and I create each one using this action.

Pretty simple.

1 Like

Hello @gf_wolfer

Overlapping specific date ranges are messing up the booking hours interface. As you can see in the video I saved 3 different date range in the same day and some hours are displayed multiple times in the booking hour interface : Recordit: Record screencasts fast & free! with GIF Support!

How would you handle this issue ? I was thinking either

  1. Preventing the user from submitting a time range that is already in the specific date availabilities and showing an alert message asking the user if he wants to delete and replace the already existing time range.
  2. Filtering the booking interface in some way to only show unique hours elements

I think 1 is the best solution but im unsure how to proceed with either solution.

Thanks in advance for your help.

I found a way to do this using the intersect with operator im able to compare lists.

1 Like

Sounds like you have found a solution, but in my own Template I use your 1st strategy to make sure a User cannot save Date or Time Ranges that overlaps another.