Calendar not displaying events correctly

Front End Components
#1

Hey everyone,

I’m working with a calendar inside tabs and the events themselves are not showing up correctly. The calendar loads inside a tab (on page load) and looks like this:

image
image1661×749 55.6 KB

Notice the events are not display correctly.

When I click on “Day” then back to “Week” view, the calendar view is corrected:

image
image1625×641 57.2 KB

From another post where @Teodor, provided the following script:

        $('a#navTabsMain_1_tab').on('shown.bs.tab', function (e) {

            dmx.parse('calendar_provider.updateSize()');

        })

So maybe it has to do with this I’m not sure… Any help here would be appreciated. If this is a bug, I’d be happy to write up the bug report.

#2

You can try to run the same script on page load too. The script above runs only on click of tab, but on page load, first tab is active by default, so the resize event does not fire.
I haven’t used calendar component yet, but it looks like a height issue.

If you have a server connect which is fetching dynamic data for the calendar, I would recommend to call the script on onsuccess static event of it. Else, you can call it on app page load too, but the calendar might not exist at that time, resulting in an error or no change.

1 Like
#3

Make sure to replace the tab Id and calendar I’d in the code, to match the ones on your page:

$('a#navTabsMain_1_tab').on('shown.bs.tab', function (e) {
     dmx.parse('calendar_provider.updateSize()');
})
#4

Thanks for getting back to me @Teodor.

This is what my code looks like:

<script>
	$('a#navTabsMain_3_tab').on('shown.bs.tab', function (e) {
      dmx.parse('calendar_counselor.updateSize()');
        })
</script>

This is what the object names are:
image

Tab id: navTabsMain_3_tab
Calendar id: calendar_counselor

Based on my understanding of what you said, I believe the Ids are correct.

It may also also be important to mention that the page conditionally loads tab 3 depending on the user type - as is the case in this instance which may be causing this though I’m not sure.

@sid, thanks for your input. You said:

I do have a SC fetching dynamic data. I implemented a static onsuccess event as you suggested and added the following code:

dmx.parse('calendar_counselor.updateSize()')

It’s working correctly now.

#5

If using bootstrap 5 without jquery loaded it doesn’t work.
Any way to make this work with bootstrap5 with no jquery loaded?

The above do not works too. Show calendar inside a second tab (bootstrap 5 with no jquery loaded) do not work, maybe this is more a issue of fullcalendar or bootstrap, but if someone have a solutions it would be great.

#6

I have done this javascript at bottom of page:

<script>
        document.getElementById('navTabs1_2_tab').addEventListener('click', () => {
                setTimeout(() => {
                    dmx.parse('calendario_eventos.updateSize()');
                    }, 500);
            });
</script>

It works, but I don’t know if its a correct way, it’s update half second after click.