Issue with Calendar component display

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?

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.

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

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.

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

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)

Thanks but made no difference

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

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

Is there a live page we can see?

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


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)

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

1 Like

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

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,
Use the picker, don’t hand code as this leads to mistakes!

1 Like

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…

More stupid than that, I hand coded
forgot to separate args param

1 Like

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

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

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.