New Plugin: TopCal - Dates, Ranges and Time Slots

Essentially we were was just worried about being tied into a specific ux/ui look but looks like it’s a standalone plugin and we create whatever design we want.

Yes you can use the plugin with your own designs or UX. In the documentation app I give a standard design just to help new users and speed up implementation but it is not necessary for the plugin

1 Like

Hey, I’m running into some issues with setting availability. When I run the workflow, it’s not populating anything in the database with date ranges. But when I switch to using a list of dates, it does write to the database. The snag is getting it to include times. I’ve set it up just like the topical-example setting availability. In the screenshot, I don’t have the time hours, and minutes set up for this page.

Screen Shot 2024-04-17 at 9.44.47 AM
Screen Shot 2024-04-17 at 9.44.58 AM
Screen Shot 2024-04-17 at 9.45.05 AM

What exactly do you mean here?
Sounds like everything is working if you use the Multiple Dates?

I think the Air date plugin has it’s own settings for publishing a List of Dates versus a single date so it may need to match up to whether you want to use a Single date or a List. I’d also recommend running the Debugger and Inspecting the elements before you run the workflow to make sure the values are going into the Set Availability element

hi @gf_wolfer - great plugin.

Is there a convenient way to show the initial content for each day’s timepicker? It is difficult for user to know if their availability has already been populated as these are always blank. Yes I could show separate text fields for each showing the populated times - but that isnt very good UX

Thanks!
Could you show me exactly what time pickers you are referring to?

yes these ones

image

Also, as a separate issue, I notice when a user books an available slot - that slot still shows as available. Same goes for your demo page.

image

Thanks for letting me know.
I just checked the demo page and when a booking is made we need to refresh the Repeating Group of times (I will get that added as a workflow soon), and then it will update and show the times with the one removed - clicking a different date and then back onto the day you just booked will show the times properly.
Essentially the Plugin is running and producing the updated times, but that Repeating Group needs to be updated

For those Inputs, the example of how to show it back to the user are to the right side and I think there was a bug in the Air Date plugin that kept it from working. So I updated that plugin to the newest version and it appears to be working now, thanks for the heads up!

Hi all.
First, Thank you @gf_wolfer for your plugin. Until now it is working perfectly :slight_smile:
I am about to finish my first app but there are still 2 last missing steps and there are driving me desperate.
I want to filter the users by the date, so from the time picker I would choose the date and the time and from that point to filter the users that are available with these parameters. All the users have now their time stored in the data set as they are in plugin page.

Would someone know how to do it or it is not possible using this plugin?

Thank you!!!

Hey @gf_wolfer ,

I just purchased the template. I thought the plugin was part of the template but I just read somewhere I need to buy the plugin too to make it fully work? On the template page it says it does not require paid plugins but then in the plugins area, it had the TopCal plugin, so I have purchased it just in case.

I have read through most of this thread before buying and know it is what I need. I thought there were instructions specifically for the template but the links all go to setting up the plugin.

I just went through and added all the pages etc to my app. I have one issue left that I cannot figure out. It is on the ‘event-editor’ page and is the Custom Workflow 3rd from the last on the workflow page called ‘Save Event’. On my app, it does not have the option for ‘things to change’ of Workflow Event. It is in yellow and I have no idea how to make this work. Screenshots are attached. The first is from your template and the second is what I see. Any thoughts?

I lost a ton of the display features because every single incident of ‘None (Custom)’ did not see to match up in my app and I had to go through a couple hundred instances and re-select ‘None (Custom)’ but did not think to double check all of them against the template which is a disappointment now that I see it not as pretty as the elements are in your template.

Now that everything is on my app, are there videos or documentation that can tell you the steps to add the functionality the template has?? I have gone through everything I found and I am still confused.

It looks amazing and will save me so much time in developing my app and your assistance would be greatly appreciated!! And, of course, THANK YOU for the template, it really saves so much time.

Thank you so much,
Jo Ann


It would be good even if I only can select 2 months from the current date or even only select the days of the week (Mon, Tue, Wed…). For the time, it can be in buckets, eg: 6 am - 12 pm, 12 pm - 6pm… The easiest way but at least a way to filter out the users.

The plugin does not do this in itself, but there is logic you can build around it to help make it happen.

The plugin first needs to run and build out the Time Slots before they can be filtered or searched. OR time slots need to be saved into the database directly and then they can more easily be searched and attached directly to a User - this way is slightly more complicated and I do not have an example of it as there are many ways it can be done using the Get Available Times Action instead of the on page Element.

Assuming you are loading a list of Users on the page load, and assuming you have a Get Available Times element in each Repeating Group cell to build out each User’s Schedule…
Next step would require using the Orchestra plugin (I believe I describe the logic somewhere in this thread). With that setup, you will run the Orchestra plugin to fire on each cell when the Date Picker you are showing gets filled in.
The Actions to put on this workflow would set a State of Users with Times in this Calendar date. The action would be something like:
Set State User’s, when current cell’s Get Available time slots :filtered (by the dropdown date) is greater than 1, display this user in the State.

Then you use this State of Users as the list of users with an available time in the filtered date

Thanks for the purchase! Sorry that the Template page did not specify that the plugin was required - it was written in the Description part of the Template but was not included in Bubble’s updated UI when they updated the marketplace - fixing that now (actually I cannot find where to change that… :woozy_face:)

For the design that is unfortunate :frowning: I believe the template is using Styles in Bubble so that it’s easy to customize, but that makes it more tricky for copying to a new app. You actually need to first Copy the ‘Styles’ from the styles page and then paste the Style in your app before pasting the elements themselves

For the Workflow - I do not know what Bubble is doing in that instance but I am pretty sure that Custom Workflow is not needed (depending on when you bought the template and created the app). I believe some others had issues copying over the workflows to their apps when there was a Custom Workflow so I disconnected it but must have forgot to delete it.
In the Template you can see that the ‘Save Details’ button has a make changes to Event that does the same change the custom workflow make changes does. So no need for that custom workflow. Thanks for pointing that out!

Okay, great, thank you @gf_wolfer !

I wish I could help you on finding that change :smile:. As for the design, I did not even think of being able to copy styles. I won’t forget that now! :sweat_smile:

And, no worries on the workflow… glad I don’t have to worry about it. Thanks so much for the quick reply.

So, with the template and plugin purchased, is the only documentation the plugin page? I am guilty of hoping that the template would be close to plug and play, which it is mostly but there are a few workflows and some additions of capabilities I need to do. Still, so very grateful that you have this template and plugin!!!


Is there any way I can merge both the display and edit schedule?

I tried doing it but every time I reset my ranges its intial date get set to 12 am, want a solution for it.
As in user can select there range , see it in the same schedule and modify there itself. Also when reset they see ranges like 10am to 7pm for example as default.

Hope you get it, @gf_wolfer thanks:)

There is some documentation in the Notes sections within the editor but not any formal documentation beyond the Plugin docs to understand the time slot logic specifically.

Are there any other specific pages or workflows that are ‘broken’ when transferring them into your app that you can post here? It helps me know what areas are tricky for users so I can make it easier to copy over or so I know to which parts to make more documentation for

Yes, you should be able to have them both in a single spot.

I am a little confused with what you mean when the Range ‘resets’. Overall this will be making sure the Referencing is setup correctly. Here is a screesnhot for how this is done in the Top Calendar Template where the time ranges are created and edited in the same spot, notice that when there are more than one Numeric Range for a single day, that we need to specify if we are referring to the first or second range:
(this exact example is a little different as it uses Option Sets and dropdowns, but similar logic with regard to referencing the correct number range can be used for time pickers)

@gf_wolfer Yes, I am familiar with those notes and I did actually have to copy them over by hand as well. I am guessing I missed the proper way to do that?

My app is error free at the moment. I will get the user flow to work in my ux and then, if I can’t find the answer in the forum, I will reach out.

Thank you so much for your very responsive and kind way of offering help!!


I am unable to extract data through this logic, for example as you can see in tuesday, default value is empty after applying the constraints.
@gf_wolfer

Is there something I am missing or doing wrong?