Forum Academy Marketplace Showcase Pricing Features

Change date in Full Calendar programmatically - is this possible?

I am using Full Calendar to display the plan and actual activity for a day side by side. Something like this:

It works well enough on the main page which is always the current date.

Now I’m building another side by side, plan vs. actual pair of Full Calendars. The main point of this page is to review different days, i.e. go back in history to see how previous days have gone.

On this page I need to be able to have one date that applies to both calendars. I use a Date/Time Picker for this and I’ve made a custom state, SetDate, the initial date for each calendar.

image

Unfortunately, changing the value of SetDate has no effect on the calendars.

Apparently Full Calendar is stone stupid in that it exposes no actions, doesn’t raise events and offers very little in the way of appearance customization.

I’ve been reluctant to use Air Calendar because the creator is providing no support.

Any suggestions on what I should try to get a side-by-side calendar that I have programmatic control of?

Hey @laurence, this is interesting, I’d be glad to take a look at it, but I wonder as a test, not sure if it would work. In your “date to display first” id be curious to see if this worked. You should be able to pick “arbitrary date” in the dynamic data list and then put your pickDate’s SetDate. Just a thought and not hard to try. Also as a test I would set a text box (content as date) on the page and put the data as your pick dates set date just to see if your state is working.

I’m not familiar with “arbitrary date” but it doesn’t allow supplying a variable, e.g. pickDate’s SetDate.

Hmmm was for sure if that would work, pretty neat feature though, ill keep thinking. Did you try the text box to see if your custom state is working?

@laurence, so try this, have the calendar be not visible on page load, set conditional as the pickDate Setdate’s is not empty → this item is visible. that should then load the calendar and set the date to what you choose.

However it does not change when you change the date picker after the calendar is visible.

Unfortunately, changing the date after the calendar is visible is exactly what I need to have happen.

So the date to display first is only when it becomes visible, anything else should be changed with the date picker of the calendar. Does this plugin not have a built in date picker?

The built-in controls are ugly:

image

. . . with no option to format or position the elements, so I am left with hiding them beneath an opaque group on which I place the controls I need.

More importantly, I need to be setting and changing the date on two calendars in coordination, one for the plan and one for the actual activity. It would not be good to require the user to switch both in order to keep them in sync.

Gotcha, makes since now. I’ll see what I can figure out.

Have you thought about building the calendars out of a repeating group? Might be easier to change the dates.

Long-term attempting to create something that looks and behaves like a calendar using a repeating group creates a level of overhead that is unacceptable, especially when it gets to weekly and ideally, 8-day calendars.

Last night I dropped $94 to give Air Calendar a try. Functionally, I’m starting to get something that kind of works, but I’m extremely concerned that Bubble doesn’t require the developer to provide support of any plugin.

On a simple page the plugin has immediately started throwing an error. It doesn’t seem to affect usability, but it doesn’t look good for the future of the plugin and all the Bubble developers who are using it.

I actually just saw your post in there, I’m probably going to be doing a calender project here soon and was considering air calender.

Thats my concern with plugins, is if and for how long they will be supported, I try to build everything without plugings and if I do use them I try to use from a company and not a single individual.

Hi All - I’m actually running into this exact issue with one of my client’s use cases. FWIW I’ve tried wrapping everything in a group & refreshing, manually adjusting via CSS, and pre-loading the RG’s content and then filtering… so far to no avail.

If anyone figures this out it’d be a huge help… also if people are interested maybe an informal bug bounty? I’d chip in $5/$10 and I think this is a large enough use case…

I’ve got some ideas, ill try out and get back

So… the full calendar will not be able to do this, it only loads that first date to show on page load, and i doubt refreshing the page is something that would like to be done.

I do have this working with using an RG as the calendar, not much to it.

One RG for the calendar and then another nested inside for the activities of the day/hour.

@laurence if you would like can do some brainstorming on this and see if we can get it to suit your needs.
@danimal4580 this is not a bug, after i read the reference… it clearly states it on page load. However it would be nice to be able to change dates either by action or conditional.

Thanks Twilson - appreciate the thoughtful note. I agree it would be nice to change via action/conditional.

I’m thinking about trying to use some Javascript to target the elements that use “fc-state-default” and manufacture the behavior I want via simulated element clicks in the calendar’s header. Would love your thoughts on that approach.

Thanks so much!

I tried with some JS to make a click on a secondary button and couldn’t get it to work. But im not a big coder, that why I came to bubble.

I was building on powerapps but stopped when the changed their pricing model. They had a “pressed” that you could do that with on the elements. When button 1 is pressed button 2 is pressed.

Im wondering if bdk if then workflows would be something to look at.

Hey All - just coming back around here. Don’t suppose anyone figured out a solution?

Thanks!

Hey @danimal4580, I actually just started on something last night that may work but ill have to play with it a little bit more.

Twilson9034, have you found a solution to this problem?