Full calendar not initializing properly

Wappler General Need Help
1

Hey Everyone,

I have a small issue with the full calendar wappler integration, when I click a button to load some events to the calendar, the events are not displaying properly in the first time:

image
image930×157 5.45 KB

However after I click on the next week button on the calendar and go back then they load properly:

image
image853×319 6.81 KB

Is there anyway to have the full calendar load properly from the first time? otherwise it can be confusing for the normal user.

I tried using the full calendar initialization script on click event but it didn’t work

onclick="$(function () {$('#calendar1').fullCalendar()})"
2

How exactly are you doing this?

3

I have more than one source linked to the calendar,

image

and when I click on the search button that is on the page, it loads the calendar with the events.

<button class="btn btn-primary btn-block" dmx-on:click="sc_listApps.load({filter: search.value});sc_listAppsBooked.load({filter: search.value})"> Search</button>

I later tried adding this to the button but it didn’t work

onclick="$('#calendar1').fullCalendar()"
4

So are these different sources different server actions? Are they (server connects) loaded on page load?
Does this happen in Week View only?

Tested both with server actions which are loaded on page load and with server actions not loaded on page load and everything seems to be working perfectly fine.
It would be best if you provide a link to your page where we can check this.

5

Yes the different sources load events info from different server actions, and they are all server connects which load on the button click event.

I have noticed this happening only in time week, and time day view only when they are selected as default view. for example I selected the month as default view and when I switched to week it loaded correctly.

Try testing with the time week/time day as default views and let me know if you get the same thing, if not I will try to deploy and send you a link.

Thank you,

6

I can’t recreate this here:

caleandar_week
caleandar_week1453×779 172 KB

Probably something else is wrong on the page. Can you please send us a link?

7

I sent you the link with login credentials in dm

8

Ok so I added the calendar update size function to the on click event of the button and it works perfectly now.

dmx-on:click="calendar1.updateSize()"

Thank you very much for your time.