Calendar does not render on load properly

[abdel-ships-it]

Reduced Test Case

https://ionic6-angular13-3vvedb.stackblitz.io

Do you understand that if a reduced test case is not provided, we will intentionally delay triaging of your ticket?

• I understand

Which connector are you using (React/Angular/etc)?

Angular

Bug Description

This a re-post of fullcalendar/fullcalendar-angular#301, but with a reproduction path as its closed & didn't contain one. Also the issue tracker has moved here as per fullcalendar/fullcalendar-angular#428.

It seems like the angular fullcalendar is not rendering correctly on load, and a window resize fixes it

Before resize	After resize

Now I initially thought this was an ionic ion-content problem, as it uses the shadow dom and slots. But using the calendar outside this ionic component doesn't seem to fix the issue.

In terms of versions, some have recommended upgrading angular or fullcalendar. To no avail, here are the versions that also have the issue

• Angular 13 & fullcalendar 6 (see linked stackblitz)
• Angular 12 & fullcalendar 6
• Angular 12 & fullcalendar 5

Workout around

I currently have resorted to checking if the calendars DOM element thead[role=presentation] has a clientWidth is 0, which means its collapsed. I then call this.calendarInstance!.render(); manually to fix this problem. However my solution is ugly as I do these checks at intervals of 100ms, for about 20 times. Furthermore, I do these checks whenever the window is focused too. This does make the issue occur less, but its an extremely ugly hack and sometimes even fails.

If this can be fixed, this would be great. I don't understand how anyone else is using angular when the most basic use cases is breaking right out of the bat. If there is anyway I can help out, feel free to reach out!

[crusadergo]

Hello @realappie. You should try with ionic lifecycle hook, because ngOnInit is too early for ionic rendering lifecycle:
html:
<full-calendar #calendar></full-calendar>

component:
@ViewChild('calendar') calendarEl: ElementRef;
calendar: Calendar;

ionViewWillEnter() { this.calendar = new Calendar(this.calendarEl.nativeElement, options); this.calendar.render(); }

[acerix]

I believe this existing ticket captures this need:
#4976
↑
Please visit the above issue, give a 👍 to vote (?), press the 🔈Subscribe button to receive updates.

[reinaldo-vombo]

heres how fix my i move the render() inside of timeout ```
setTimeout(function() {
calendar.render();
}, 1000)