New Plugin: TopCal - Dates, Ranges and Time Slots

[gf_wolfer]

Hey everyone, I’ve released a new Plugin that will help you out with scheduling functionality in Bubble

The Plugin generates Dates, Date/Time Ranges and more in any time zone that you specify using any Date/Time inputs. No more struggles trying to save a date in the Current User’s time zone or dealing with daylight savings time!

Page showcasing it’s abilities: https://topshelf-elements.bubbleapps.io/topcal2

Plugin Page: TopCal - Dates, Ranges & Time Slots Plugin | Bubble

Editor example (only meant to be viewed in Editor mode - no run mode functionality): topshelf-elements | Bubble Editor

The plugin does not have any UI elements, allowing you to implement it into your own app’s design seamlessly and I will be releasing more ‘elements’ to go along with it soon, as well as a Scheduling Template that uses the plugin

Any questions, concerns, comments? You know what to do

[gf_wolfer]

For those just scrolling and not clicking, the plugin helps with all types of Calendly like scheduling:

[gf_wolfer]

I have had a number of people asking about functionality - and this plugin is ideal for Minute/Hourly type scheduling like Calendly, not multi day scheduling like a hotel booking system.

You may be able to use it to help build Multi Day scheduling apps, but it hasn’t been designed for that use case yet so there could be some hiccups - if you have this use case and want to test it let me know

[gf_wolfer]

Added new functionality:

Setting Time Slot Increments to be different than a Booking/Event Duration

Also created this new page to test out in both the Preview and Editor:

Bubble - Visual Programming

[jared.gibb]

I am so close to purchasing!

I’m wondering if you Think this plug-in would work for my use case.

I am creating a performance review app. A performance review manager would set a day/days that they want to perform reviews.

The app with then give them a list of available time slots to have a review on those given days. When one time slot is taken that timeslot would be removed from the list of available time slots due to being marked unavailable.

I am needing 30 minute time increments.

I feel like this would do the trick. What do you think?

[gf_wolfer]

Yup, sounds like a great use case!

There will obviously be a little work to structure your own Data in the best way, but as you can see in the Demo, the Manager could set a Weekly schedule (such as every Tuesday), or set specific Dates or block dates. You can save this data on a the Manager data type, or better yet create a Schedule data type that links to the Manager.

Then when someone creates a Booking (a new data type), you can save that Date Range that gets booked and feed all the ‘Booked Date Ranges’ into the Plugin so it only generates Time Slots that are still available.

This page can show you which parts of the scheduling the Plugin will help most with: topshelf-elements | Bubble Editor
But also let me know if you have specific questions

[pierre6]

Hi there,

Im interested in the TopCal - Dates, Ranges & Time Slots Plugin but I still wonder if that would work for my use case.

I need to display available time slots in order to book an appointment with a bike repairer.

Those bike repairers have different weekly patterns availabilities e.g available from tuesday to saturday from 9:00 am to 5:30 pm

I don’t necessarily need the bike repairers to choose their weekly patterns availabilities by themselves, id rather import those directly in the database.

Once the availabilities are set I want the users to be able to select a appointment date and time and store it under a ‘booking’ table.

The above messages give the impression that the plugin is able to do that but I was still wondering about the 24h format and the import of weekly patterns availabilities directly in the database.

[gf_wolfer]

The plugin would definitely help, and the 24 hour formatting is no problem as date/times can be formatted to display as you need them.

I wouldn’t get too hung up on adding times ‘directly in the DB’ or not, as it might be simpler or even necessary to do it from an Admin page that you create in your app for yourself rather than trying to input in the Data tab or uploading in excel files.
If uploading through the DB is necessary though, than this plugin and the data structure of would make the uploading much easier as weekly availability patterns are saved using Number Ranges, and not Date/Time Ranges which are tricky to format right in a csv in the correct time zones

I plan to have some videos out real soon that will show some of this a little more clearly, as the plugin helps a lot but there is also some strategy with how to save and use the data

[gf_wolfer]

@pierre6 @jared.gibb
Got some more documentation with a quick video and will have more soon:

Bubble - Visual Programming

[gf_wolfer]

Added another video to run through some of the features of the Plugin and how it helps, especially with common Bubble time zone issues

[pierre6]

Thanks for the videos @gf_wolfer

One more question, if my ressource monday time availability is 9:00 am to 1:00pm / 2:00pm to 5:30pm will I be able to store that ? [540,780],[840,1050] im guessing ?

If I only need to store weekly availability patters and not block days or specific available days uploading data from csv to DB should be quite easy ? Or am I missing something ?

[gf_wolfer]

Yup, that is the format that gets saved in the DB for a list of number ranges and I think that’s how you would write it in a CSV if you are uploading it in an app - double check with a single piece of data first though

It would be as simple as feeding in those list of Number Ranges into the plugin, specifically the Get Available Time Slots element, plus the Booked Times date ranges and if will work the magic. Sounds like you’ve got a good understanding of it but let me know if you hit any roadblocks

[gf_wolfer]

Update: Added 2 more walkthrough videos
From the videos I learned that I say ‘umm’ and ‘uhh’ too much.
Hopefully you learn something just as useful but related to scheduling.

Videos at the bottom of the page:
topshelf-elements.bubbleapps.io/topcal-example

[willtaylordesign]

Subscribed! Wow, this is great! I’m currently torn between this and Air Calendar and really wish there was a way to integrate the two… I love how TopCal doesn’t save a ton of items to the database and makes scheduling availability super easy for the user. On the other hand it’s hard to give up some of the drag/drop UI in Air Cal… Is there any way to get AC to read the output from GetAvailableTimeSlots?

[gf_wolfer]

Based on the regular Bubble Full Calendar I can’t think of a simple way for them to work together as GetAvailableTimeSlots produces a List of Bubble Dates and the Full Calendar element can only accept App Data Types and not a List of Dates. Not certain about Air Cal and how it differs.
If you can think of something though let me know!

If @seanhoots is still around the community or any other Full Calendar wizard maybe we could collab on something here. Or if Bubble had a ‘fork-able’ version of their Full Calendar plugin I could try some stuff but just don’t have the capacity for a full build of it.

Also, how would you picture the 2 working together?
Would you want the list of Available Time Slots all showing on the calendar as events?
I always thought Full Calendar it is more setup with a UI where you would block date ranges to be unclickable and everything without an event is available?
(again haven’t really used it much so not certain)

[boston85719]

I don’t beleive @seanhoots is still around. On the thread for his plugin he seems to be MIA for over a year.

When I was making the Google Calendar portion of my Calendly Clone template, I built out features to only show the booked meetings onto the custom calendar. In building that out I really wanted to show the entire duration of the booked time using a color to denote the duration, but it really slowed things down…so despite getting it done, it was too clunky to utilize.

If you can create a plugin with UI components to put together a custom calendar with that ‘duration color’ aspect, it is as simple as using the booked dates. Of course things are always easier said than done.

I have a couple of clients who were using the Air Calendar plugin who had enough with its bugginess and lack of maintenance, as well as overall lack of features that they decided to utilize my Calendly Clone template and integrate it into their existing projects.

One of those clients decided that they really wanted the UX of the Air Calendar for that drag and drop and color duration aspects. Since I am not a plugin developer I put them in touch with @vini_brito who I believe does a solid job with plugin development and last I have heard he is in development on a custom solution for that client.

Maybe reaching out to @vini_brito to collaborate.

You might also reach out to @keith who just launched his Parallel Dates plugin that has some great features. He has the ability to create the available time slots based on booked times but also to change dates/times based on timezones (that is the parallel portion).

When I made my Calendly Clone template I actually used Keiths listshifter plugin to run all the processing necessary to create the parallel dates as well as the available times slots based on booked slots. I believe his newest plugin does exactly what I had used the list shifter plugin to do and probably some more. Since Keith developed the Calendar Grid Pro plugin, he may be the date/time Wizard. I know I learned everything I know about dates/times due Keiths incredible presence on the forum.

[gf_wolfer]

I can’t speak to exactly what @willtaylordesign meant, but my interpretation of it was for the Full Calendar to be the actual element that the end user interacts with to Book times and thus it needs access to GetAvailableTimeSlots results to know what is bookable. Producing a UX like this: https://savvycal.com (scroll partly down for the example), instead of the usual Calendly UX that we both recreated in our templates

For displaying and editing Booked Times the Full Calendar plugins work great and I would recommend using them like in the the Top Calendar template here. It can be slow if you try to load every Booking instead of filtering for bookings that are only in the calendar month that is showing. And the calendar itself I think is quicker than trying to rebuild something custom in Bubble.

Good call, @vini_brito actually helped out with this TopCal plugin as well, he’s great

[boston85719]

@gf_wolfer

And the calendar itself I think is quicker than trying to rebuild something custom in Bubble.

Definitely, the custom full screen responsive Google calendar clone I built is very sluggish…it looks great as it is fully responsive on all devices, but not very performant. Would be great if the Bubble Full Calendar plugin would be more responsive and customizable to remove certain menu buttons etc.

That savvycal platform looks amazing.

[willtaylordesign]

@GF_wolfer yep, I think you interpreted my question accurately. While Air Cal does support a list of dates as an input, I haven’t quite figured out how to help it differentiate between available, blocked, and booked. Each type would require independent control of conditions such as “clickability” and styling.

For the time being, here is a wire for what I’ve decided to try and build as part of an MVP. TopCal has made it super easy to display the available time slots. My current challenge is displaying all times of the day (in 15min. increments) regardless of booking status. My users need to see all times for context, booked times to distinguish popularity, and available times to book.

I found a really long workaround but I don’t trust it at scale.

[jared.gibb]

Almost there! Working that up!!

Jaredgibb.bubbleapps.io/calendar

Buy @gf_wolfer’s plugin !!