calendar does not render on load properly

[dolphinsd]

Testing 5.0.0-beta.2 calendar does not render full, all garbaged together on load.

Clicking month view displays normal.

The issue is that width is not set. After clicking month this table is set with correct witdth.

before

See attached picture, look at the top left corner.

[dassram17]

I'm also having the same render issue with fullcalendar5 and angular10

[acerix]

Sorry for the delay in responding to your issue, I have just begun triaging on this repo.

I couldn't replicate the issue in the latest release:

https://codesandbox.io/s/modest-borg-635yz

Would you be able to post a runnable, stripped-down demonstration of the bug if there is still an issue? Would really appreciate it because the time saved reproducing will be time spent fixing.

[SimonBrazell]

I'm experiencing this too on the latest version, the calendar renders like the screenshot above until my API request has completed and events are supplied, then it looks as expected. Did anyone here manage a workaround or solution? I tried hiding the calendar element until the API request has completed but that doesn't work either.

[SimonBrazell]

Workaround, call this.calendar.getApi().today(); when the view has loaded.

[rattkin]

Workaround, call this.calendar.getApi().today(); when the view has loaded

When do you call this? I tried ngOnInit() and ngAfterViewInit() and nothing happens

[rattkin]

my solution:
setTimeout(() => {
this.calendarComponent.getApi().updateSize();
});

[SimonBrazell]

@rattkin I am using the component in an Ionic/Angular project so it's within an Ionic specific lifecycle hook (ionViewWillEnter):

public ionViewWillEnter(): void {
    this.calendar.getApi().today();
  }

• ionViewWillEnter: Fired when the component routing to is about to animate into view

Probably not a lot of help, and much too late, but that's what I did.

[Pakick]

Was this ever solved?

[abdel-ships-it]

I have a strong feeling this has to do with the placement of the calendar component, I assume you guys are putting your calendar in ion-content, which is projecting the calendar element in a shadow DOM slot. Placing my calendar item outside of ion-content seems to fix this problem so it must have to do something with that. I will continue looking for a work around and report back here.

[abdel-ships-it]

@acerix Here is a reproduction of the issue

https://stackblitz.com/edit/ionic6-angular13-3hipfw?file=src/app/app.component.ts

[abdel-ships-it]

Inside the ion-content or outside, the issue still occurs. I even added an extremely ugly fix where Im checking every few milliseconds and checking if the size is incorrect using this piece of code. But even that sometimes doesn't work. I run this function on comp

   ngAfterViewInit() {
     this.calendarInstance = new Calendar(this.calendarEl.nativeElement, { .... });
     this.calendarInstance?.render();
     this.fixCalendarSize();
   }

  private async fixCalendarSize() {
    const wait = (ms: number) => new Promise(r => setTimeout(r, ms));

    const maxAttempts = 20;

    let totalAttempts = 0;

    let sizeIsWrong = this.checkIfCalendarSizeIsWrong();

    if (!sizeIsWrong) {
      return;
    }

    while (sizeIsWrong && totalAttempts <= maxAttempts) {
      if (sizeIsWrong) {
        this.calendarInstance!.render();
      }

      await wait(100 * totalAttempts);

      sizeIsWrong = this.checkIfCalendarSizeIsWrong();

      totalAttempts++;
    }
  }

  private checkIfCalendarSizeIsWrong(): boolean {
    // Because of a weird reason, sometimes the calendar is not sized correctly. So we will wait one second and check if
    // the header width is zero. We are using the header here as trigger as its present in different views (dayGridWeek, dayGridMonth)
    // See https://github.com/fullcalendar/fullcalendar-angular/issues/301
    const matchingTableHead = this.calendarEl.nativeElement.querySelector('thead[role=presentation]');

    if (!matchingTableHead) {
      return true;
    }

    const calendarSizeIsWrong = matchingTableHead.clientWidth <= 0;

    if (calendarSizeIsWrong) {
      console.warn('[calendar] calendar size is wrong');
    }

    return calendarSizeIsWrong;
   @}