New Plugin: TopCal - Dates, Ranges and Time Slots

Thank you for keeping up with me on this, I found it really weird, maybe by showing you the video you can diagnose what is happening, the numeric range is just going random haha

That is odd. From what I see I can only suggest re-building certain elements to see if they consistently do this.
I would try adding a new group of inputs and the Set Availability element from scratch and looking to see if it still gives random numebrs.

I am also wondering if the Set Availability element is creating the number range before those 8am and 18:00 values are filled in and then it is not refreshing . Maybe try putting the Set Availability element in a group that you can run a ‘Reset Group’ workflow with a button press just to see if that works. Or put the Set Availability element to be invisible until the condition of both of the inputs are not empty, as the invisible element will not run the javascript until it is visible

Amazing! That was it, yes it was getting values without resetting. Thank you!! Go Browns! hahaha

hey @gf_wolfer there is sth I dont understand with the plugin that I think could be a bug. check this video for more.
Basically, the range data 3 is not updating correctly. I tried to:

  • delete and insert a new time picker for the third range
  • add new set availability element
  • same things happens even if all the three items are shown on page load

but still the issue remains. do you have any idea how to solve this?

Thanks.

EDIT: From further testing, when you the SetAvailability element with condition: when customState = x, start/end hour/minute = empty then the condition is not applied.

It’s hard to know what is happening here without seeing the editor and everything. Also not too sure what you mean with your EDIT, did you figure things out?

Unfortunately the issue is not yet resolved. Check this video for a hopefully better explanation.
What I have is:

  1. show range (i.e. min time picker and max time picker) depending on a custom state (monday). e.g. when monday’s number = 1 show range 1; when monday’s number >= 2 show range 1,2; when monday’s number >= 3 show range 1, 2, 3.
  2. Set the value of the availabilty element conditional on the custom state, too (see pic below). I want this because if the users presses “x” on a range I want the set availability to have empty values so that I do not add the range in the database. And this is where I think the issues happens. Range 2 is correctly updated but Range 3 not.

Thanks @gf_wolfer

Easy fix, in your screenshot you can see the Minute and Hour fields are mixed up for the last date picker fields

Screenshot_052923_101945_AM

Indeed that was the issue, stupid mistake, sorry and thanks.

No worries, happens to the best of us!

I am trying to display full calendar but it just showing a week:
image

In addition, what woul be the best way to display the available days like this:
image

In which will appear like this in the calendar blocking the days that are not in blue:
image

That is the number one thing that We are trying to implement.

On the plugin page you should be able to find the editor that shows you exactly how he set the calendar view up, that’s what I did

1 Like

This is just a single row view in the Bubble Editor as it is a Repeating Group. It should be set to Full List though so that once you view the app in the Preview (live) mode it will show the full month.

You can use this link and Copy and Paste elements right from this editor into your own app:

@gf_wolfer I finally managed to display the days based in the logic we have. However, how can I display the cells only from today and upfront and keep days before today unclicked and not with the blue background?

Basically I could not manage to not display the cell date before today without the blue font color:
image

For that ‘When’ condition add the following:
AND Current Cell’s date:(add or subtract hours if you want today included or not) > Current date/time

1 Like

It worked but the current day do not receives the style although it still clickable:

image

I did and Current cell's date > current date/time. I believe that if there had a >= it would work.

I did it following the calculation you advised. Really appreciated.

No problem :+1:

Hey! Just going back to this question, can you recommend another input for this? I didn’t find any that worked similarly. Also, for the dropdown option, do I need to create the times as option sets and have another value for the option set represented as a number? Thank you!

I mostly just use the Air time picker or Dropdowns because they’ve always worked well for me.
I am sure there are others that can work but I am not familiar with many of them or if there are new ones. At one point I even used the Bubble date & time one and used some CSS to block the Date field and only show the time, although this was annoying in other ways.

The regular Bubble Dropdown: topshelf-elements | Bubble Editor
This uses Options Sets, which you can view in that editor and easily Copy and Paste them into your app. You can setup the option set of times just like in that app

Amazing! Is there a way to copy those option sets from app to app? Or have to do it manually?