New Plugin: TopCal - Dates, Ranges and Time Slots

For displaying 15 minute time slots you may be able to use the Option Set in this template called Times to help you display them in a performant way

I use them to create Time Only dropdowns, which I am actually setting up for anyone to use for free very soon. You can go to the link above and Copy the Option Set from that app and then Paste it into your app. Hard to say for sure if it will work for your use case but let me know as I am sure others will come across a similar need in the future :call_me_hand:

1 Like

oh no! I can’t log in

Thanks! Ha option sets was actually a big part of my workaround. I had an attribute that is the total minute count of the day up to that point (so 9AM = 540min) and convert by changing h/d/m/s to 0 then add minutes 540. I’m probably over complicating it though.

1 Like

The option sets in that template also give you that Minute from start of day value, as well as the Hour and Minute value. So you can use the same strategy or just change hours to and change minutes to

Thanks!

:cry:

I’ll check back in a while. That makes me sad. I messed up a login state.

Looks like the booking page works for now

https://jaredgibb.bubbleapps.io/book_with_me?schedule=1617115544870x657105707309989900

Oh wow were you able to display both events from the database and a list of dates from TopCal in Air Calendar?

1 Like

I’ll share again soon. That’s being added next. On /calendar you see bookings. Ok /book_with_me you see free times. I’ll update soon!

@willtaylordesign

I used my own full calendar plugin I’m cooking up

[update] login issue is fixed. will add displaying bookings + available times

1 Like

Plugin Update

ADDED

  • Get Available Times as an Action
    Now you can find available times slots as an Action instead of only in an Element on page. You can get more creative with how you are querying for available time slots and saving the data. Because this workflow runs on the Bubble server you need to make sure that a Time Zone ID is filled in for accurate times. For current users, this is the same functionality as the Get Available Time Slots element but as a workflow Action

  • Added an Element called Browser Time Zone. This lets you simply get the Current User’s browser Time Zone ID. Very useful if you are using the above action and want to use the current user’s time zone id

Screenshot_040521_102825_AM

REMOVED

  • Weekly ‘Date Times’ output from the Get Available Time Slots element.
    I originally only had them in there for testing and never removed them. I couldn’t think of a reason to keep them in there and I think they just confused everyone so I removed them. If you were using them and can think of a reason they should stay in the plugin let me know
    Screenshot_040521_102742_AM

PS - more updates coming soon to help you query Availability for specific periods of time instead of just Month-by-Month availability in the current plugin

Plugin Update version 2.1.1

ADDED

  • Ability to choose whether you want to get available time slots for a Calendar Month (the old /standard behavior of the plugin) or whether you want to define a Date Range
    This is ideal if you want to Get Time slots for a shorter period of time, such as a Week View, or next 3 days and also gives you more flexibility to use this plugin’s Action on the Server Side/API workflows.

  • Before this update there was a bug where some available time slots created by a weekly pattern may not have been loaded for the last day of a month if the Host Calendar and Booker’s time zones were far off or if Bookable times we close to the end of day on the last day of the month. It’s an edge case but also just another time zone issue that you don’t have to worry about with this plugin :metal:

1 Like

This will be handy! I was planning to add shown start” and “shown” end to my calendar plugin this week.

Thanks!
It opens up some more use cases and could be some more updates coming soon

1 Like

Im having some performance issue generating date in the calendar inside a repeating group : Recordit: Record screencasts fast & free! with GIF Support!

As you can see in the video the dates take quite some time to load. Im having trouble finding where it could come from.

As far as I know what could impact the loading time is filtering client side, I only find one example of this right there.

I notice the delay and it might even be worse on smartphones so good call considering ways to improve it.
Overall this comes down to optimizing for your UX as every web application, Bubble or not, has tradeoffs they need to balance. Even AirBnB hides their booking calendar further down the page to give it more time to populate before you scroll down to it. So here are some observations and suggestions:

  • If you are using TopCal, or any type of scheduling/calendar system, within a repeating group, it needs to run for EVERY item in the repeating group. So be cautious of how many items you load into that repeating group at one time

  • You are correct, by using that type of Calendar UI with the Bubble filters it is not the most efficient way. It is optimizing for giving a lot of detailed availability information and not speed. But in your use case, you probably want to optimize for speed and showing locations. The user’s first goal will likely be finding a place and second goal would then be viewing a schedule

  • One way to do this is to use the newest plugin update to only get availability for the next 3 (or 7) days instead of the calendar month and removing the entire Calendar repeating group as it takes some type to render on page. Instead of the Calendar element you can use the TopCal List of Dates element to create a 3 day view calendar for the next three days. This should be a significant improvement

  • Combined with the above, you can just list some basic availability using Text, such as GetAvailableTimeSlots: formatted as Tue 19th (day of week), unique elements. This will show you the upcoming days there are availability without needing to filter against a Calendar element
    Then you can add a ‘view more’ button that opens a popup or new page with the Calendar UI for that specific location

Or if you are very comfortable with Bubble and want to get creative you can run all the Available Time Slot logic in the app’s backend when availability is set and when bookings are made, and save time slots directly on the Locations. Then you do not need to run Top Cal on every page load, but instead you are constantly saving/updating a List of Dates directly on the location. This would be the best performance for an end user but will take some skill to build out properly

2 Likes

This is a good idea for anybody who doesn’t plan to change their availability’s for a while. Like reserving a room in a library or something like that!

Exactly, depending on the use case it could be a good option.

Just need to make sure you set up good ‘backend workflows’ to run and update the schedule if a booking is made and when new availability gets set. Also a periodic/monthly ‘update’ to delete out past date times to keep them from piling up

1 Like

Hi, I just want to ask would your plugin be able to intergrade with the booky template made by zeroqode? https://appointmentbooking.bubbleapps.io/

Since I wish to build a booking website like that and it fits most of the functions that I need, but it lacks features such as:

  1. Unable to allow the instructor to set available timeslots or block the timeslots it currently has lessons

  2. Unable to book recurring lessons like 1 lesson each monday.

Thanks!

Hey there!

Overall the template might speed up some parts of development for you, but I can’t say for certain as I do not know the ‘Editor side’ of it and the exact UI/UX you want.
But I do know that the TopCal plugin would definitely help you give instructors the ability to set their availability, filter times based on what is already booked, etc as that is precisely what it was made for.

For recurring lessons, I guess I would say this will depend on the logic you need for recurring lessons to know the best way to structure it. If you are following along with the TopCal documentation you would likely want to create a Booking for every future recurring session.

However, if recurring sessions are the majority of Booking types and they will be scheduled for indefinitely and always at the same time of day then it there could be more creative ways to structure this where the plugin could help create the weekly pattern for Bookings as well

2 Likes

Thanks for the reply!

I was thinking about something like this, but it seems that your plugin should be able to allow for setting up for such a system, I would need to figure about the UI part though I guess.


Also, I want to ask about the time zone problem, since I want a regional system where a group of users would be directed to their own part of the website site (like japan, korea visitors have their own japan, korea section), would the plugin allow me to set a specific timezone like gmt+8 or +9 on that part of the section of the website?