New Plugin: TopCal - Dates, Ranges and Time Slots

Thanks, @gf_wolfer Appreciate the references.
Cheers

Hi @gf_wolfer

It seems that the template example for the timezones are a text field in the db with a handful of example texts to input on the “schedule” data type object. Would you be able to help clarify how the time slots account for availability times based on the text field for the time zone? Example: If I am in CST and set my availability 9am-5pm PST or GMT

Thank you for the clarification on how to setup the timezone functionality.

Cheers

For a Pattern Schedule (Mondays, 9-5) - the Get Available Times element in the plugin will construct the 9-5 availability in your saved time zone id for given dates. This is important to construct the times for the specific days as 9-5 in a time zone can be relatively ‘different’ on certain days due to daylight savings times.

Changing the time zone will keep the 9-5 in the desired time zone, but if you are viewing of it while in a different time zone the times would not show as 9-5 on your computer.

For saving Specific Date Availability, this will create the Time Ranges when you set the range in the time zone id specified. This means that if you change the saved time zone id AFTER creating specific time ranges, they will not change as they were specified with all the dates and time zones needed to be an accurate time.

It can be confusing and I am not 100% sure what you were asking but I hope the above helps

Since the “Time zone id” data field is a text, the plugin must look for a specific id/text? How can we make sure the correct ID gets entered for any of the 24hour time zones? The input element in the topcal-example page only has ~8 static texts for selecting a timezone.

What are the 24 id/text names the plugin is looking for?

Thanks so much, @gf_wolfer

The Time Zone ID must be in IANA format, which is what Bubble uses when you use the ‘Formatted As Date’ dropdown. I don’t recall the exact number but there are actually hundreds. So I only put 8 in that example for simplicity.

Initial logic suggests there would only need to be 24 zones, but Time Zones are political and thus fluid, so the time of a country can actually change and is not a static offset hours offset. Sometimes a country or region uses daylight savings time and sometimes it does not.

Wikipedia has a list of IANA time zones, the ‘Canonical’ ones on that list can be used by the plugin and the Luxon.js library that the plugin uses: List of tz database time zones - Wikipedia

Got it. So if we use a single choice drop down with a static set of any number of IANA formatted time zone ID’s we’re good to go (or alternatively an option set)?

Exactly. The IANA options as static options work, I would only recommend an Option Set if you want the Dropdown to say something different instead of ‘America/New_York’

Thanks, Geoff.

Question:
If availability is set in the db as [520, 1080], which is 9am-6pm and time zone ID is America/Chicago in db, then the user travels to Europe/London timezone ID, what method or plugin element can be used for the display time to convert to show the time saved in the db as London time?
Cheers


What is desired experience?

When the User travels to London, should their Calendar times change from 9-6am London time?

If yes, then they would need to manually change the Time Zone ID data to London.

But if you want to make a ‘smart’ system that they can input a Date Range they are traveling to a different Time Zone for and the system recognizes that say for the month of May to build the 9-6 schedule in London time, then you would need a new Data structure to recognize what date’s are being viewed and conditionally change the Time Zone ID based on the dates.

Or maybe you were just wondering about when the Schedule Owner is viewing the above images, it should show 9-6pm (central time) in London time?

1 Like

Hello, I just started using TopCal as well and looking forward to doing bookings using TopCal.
I have an issue with the time zone dropdown as none of the time zones are showing up and the dropdown is just blank. This is happening in the TopCal Plugin example page (see picture below) and when I loaded the TopCal plugin in my own bubble page. The Get Browser Time Zone ID element does not seem to work for me as well.
This seems simply but not sure why it is not working for me ( maybe I am missing something??).

Thanks for pointing this out. Not sure what would have happened here, as the Dropdown is the same as on this page which seems to be working: TopCal Plugin

I’ll look into it soon but in the mean time you can reference that other page or clone the app (it is a template) and change that dropdown to something else on that page

@gf_wolfer Any plans on converting the UI components to the new responsive engine?

I’m migrating my app to the new engine and. would be a huge time saver!

Hi, I have been testing the TopCal Plugin on my own bubble site and for some reason my Choice source is not coming through when I inspect my Dropdowns. My choices sources are pointed to the right spots (All Times: filtered:sorted by Time as minutes) and I have my option sets setup correctly with all the 15 time intervals. This is happening to all the dropdowns.

Any help will be appreciated!

Yes, but unfortunately do not have a timeline for this. Maybe in a week or 2. I will post here and can DM you when I release it.

1 Like

@Tdot Odd. Thanks for the screenshot, it looks like the Data Source is empty so have you tried changing the Data Source on that dropdown to just All Times to see if they show up? Or referencing the Times option set somewhere else to check if it’s an issue with the Option set or the dropdown?

If paying with that doesn’t work you can shoot me a DM with a link to your app set to anyone can edit and I can try and troubleshoot it :call_me_hand:

Great, thankyou!

@gf_wolfer does your plugin work on finding free hours when the duration of the meeting is more than 1 hour?

I managed to implement the search for time intervals only for hourly meetings after the above, it did not work properly.

Yes the plugin will work with hours, but it must be expressed in the plugin as minutes (so 90 minutes instead of 1.5 hours).

If you have tried that and it’s not working, then I would need to see in more detail your specific setup and the results the plugin is giving for any additional help.

@gf_wolfer at the moment I cannot purchase your plug until I am sure it works. (in Poland the value of the plug is almost 4 times higher - and I’m at the beginning)

I have a version for the editor view (topshelf-elements | Bubble Editor ), could you put long meetings in this editor for more than 2 hours, i.e. 120, 180, 240, 300, 360, 420, 480, I would like to test it.

Amazing plugin and thanks for the support @gf_wolfer

I have an issue with the start date of GetAvailableTimeSlots. In my example I want to show available time slots 24h after now (Friday, Jun 10, 2pm). I have created schedules with full day availability. However the first slot it brings me is the first slot of Sunday, Jun 12 (instead of Saturday, Jun 11, 2pm).

Could you think of any issues in my setup or is it how the plugin works?

Thanks!