Issue with Calendar component display

[Hyperbytes]

I am having an issue with the calendar component displaying correctly in the browser. (BS5/Node)

I start with a very basic calendar configuration

This displays correctly within Wappler

However when i display this in Chrome via node server on localhost i only see the day headers initlally

If i click on month then the days of the month are displayed but as small boxes

If i then open the developers console i see the calendar displayed correctly

All i see in the developers console is a single error which seems to live prominently in my console window since moving to BS5 (any idea on that one also appreciated)

If i refresh then the calendar days disappear again

Anyone any ideas what is happening or I am doing wrong?

[mebeingken]

@Hyperbytes

All i see in the developers console is a single error which seems to live prominently in my console window since moving to BS5 (any idea on that one also appreciated)

Saw this error as well…for me it was if I was using both tooltips and popovers. If using either one alone (by removing the loading of one of the scripts), the error goes away. Not sure of the actual impact of the error, as I moved on with just one of the solutions.

[Hyperbytes]

Thanks Ken, yes I have both tooltips and popovers in header. removing popovers (which i am not actually using) removed the error but sadly did not resolve the calendar issue

[sid]

Is the calendar inside a show/hide logic or a Conditional Region?
If so, you may need to call the calendar update method (available in picker, from what I remember), for it to re-render itself to the available area.

[bpj]

You could try giving the col/container a min-height property

[Hyperbytes]

@sid

s the calendar inside a show/hide logic or a Conditional Region?

Thanks for the idea but Nope, no logic applied all, just the basic component
Actually having same issue on two different pages using the calendar (public site and Admin console)

[Hyperbytes]

@bpj

You could try giving the col/container a min-height property

Thanks but made no difference

[bpj]

Are you running a SC to get data for the calendar? If not, you may want to run the code in the following post on page ready rather than SC completion/modal show/variable update

Full Calendar Initialisation size issues

When toggling Calendar visibility, you have to initiate an updateSize. I use a simple JS function that I call on click of the button that toggles the visibility. Also useful if the calendar is on a modal that isn’t shown when the calendar is rendered. function resizecalendar(el) { dmx.parse(el + '.updateSize()'); } You could use the onUpdated dynamic event for the variable to trigger it sending the ID of the calendar element as a parameter

[Hyperbytes]

Still getting nowhere on this one, just cant get the calendar to display correctly on load.
@psweb Paul, any ideas, think you have similar battles with refresh

[bpj]

Is there a live page we can see?

[bpj]

I’ve just created a NodeJS/BS5 page to test and the calendar starts the same as yours. If you run the updateSize() function as I put in my previous post, it does update. In my case this ended up being

function resizecalendar(el) {
    dmx.parse(el + '.updateSize()');
}

then I would call the function when the page’s SC data has loaded as

dmx-on:success="run({runJS:{function:'resizecalendar',args:['content.calendar1']}})"

This function can be useful when updating with data from SC, especially when the calendar is in something that may not have been visible on initialisation (e.g. in a modal)

[Hyperbytes]

Perfect, cant thank you enough.
Guess, if this is a node related issue then do we need to class it as a bug? @Teodor

[bpj]

I certainly think that content pages could initialise calendars better once loaded. I guess it’s somewhere between feature request and bug

[Hyperbytes]

So annoyed with myself now. Had read the post you linked to and added the code (almost) but made a mistake in the args() syntax. Should have known better,
NOTE TOO SELF (AGAIN)
Use the picker, don’t hand code as this leads to mistakes!

[bpj]

I doubt you would have been able to use the picker as you are selecting an element id as a string (not a property of the element) - the main thing with NodeJS (and we all forget at times) is to include content. at the start…

[Hyperbytes]

More stupid than that, I hand coded
run({runJS:{function:'resizecalendar(‘content.calendar1’)})
forgot to separate args param

[Teodor]

So the problem here is the calendar does not render properly on a node content page and needs to be reinitialized?

[Hyperbytes]

Correct, in node the page needs to be refreshed with .updateSize() after page loads
(works correctly in PHP model)

[psweb]

Sorry @Hyperbytes, dont know how I missed this.

So yes, FullCalendar if inside a Show/Hide, needs updateSize(), they also need refetch() if using multiple sources or updateSize() does not seem to be enough.
I actually set a variable on my page, and every time the single page app page id changes, i run an on update, with the updateSize(), however I do not use it inside a flow like you did, i just run it directly through the bindings.

<dmx-value id="var_which_page" dmx-bind:value="0" dmx-on:updated.debounce:1000="phCal.updateSize();phCal.gotoDate(browser1.viewport.width < 768 ? varToday.datetime.addDays(1) : varToday.datetime)"></dmx-value>

It’s doing a few things, but you can see the updateSize there, also with a debounce or it does not work.

As a side note, I could not get tooltips to work right either, i think its because i am using bs5 and the tooltip is bs4 still, so it kind of works, but often the tooltips will not go away after the first one is activated, but i never got around to figuring that one out, i just removed the tooltips rather.