Calendar does not render correctly on first render using the Angular component in Ionic

[pramodjb]

Hi there,

As usual I am getting the data from API and assigning the same to "Event Input" array as shown below.

fillCalendar(start, end) {
this.auth.Appointment(start, end).subscribe(
data => {
this.calendarEvents = [];
data.map((timeSlot, index) => {
let day = { index, title: timeSlot.name, start: new Date(timeSlot.startTime), end: new Date(timeSlot.endTime), schoolId: timeSlot.schoolId, SchoolName: timeSlot.schoolName, comments: timeSlot.comments, uniqueId: timeSlot.uniqueId };
this.calendarEvents = this.calendarEvents.concat(day);
})
}
)
}

However, during the initial loading though the events are bound to the calendar, they are hidden some where. However, the events gets shown without running any code when doing the following actions,

1. Open developer tool(F12) and close it.
2. Click on next or previous navigation.

Please let me know if any further details are required. Any help here would be greatly appriciable.

[acerix]

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

[pramodjb]

Hi Acerix,

Thanks for the response. Below are the steps to be followed after downloading.

1. Unzip to some location.
2. Open the command prompt and browse to the folder in which it is unzipped.
3. Run "npm install" to install all the required packages.
4. Run "npm start" to run the project.
5. Browse to the url "http://localhost:4200/calendar".

Sample Ionic-FullCalendar.zip

[acerix]

Thanks for the demo. I can see the issue which was also reported in our support inbox. https://fullcalendar.freshdesk.com/a/tickets/1076

There is no component for Ionic though, and I believe Ionic support is outside the scope of the Angular component, so will leave this issue open as a feature request for Ionic support.

The problem is that the Angular component calls render() from ngAfterViewInit, but in Ionic that is too early, I think it needs to be called from ionViewDidLoad instead.

The calendar renders correctly if render() is called after the page is loaded, for example by resizing the window.

I don't know a good way to fix that in Ionic but this hack to trigger a resize seems to work ok:

ngOnInit() {
    setTimeout( function() {
        window.dispatchEvent(new Event('resize'))
    }, 1)
}

[bfwg]

I wrok around was to add a setTimeout around getApi().render();

setTimeout(() => {
  this.fullcalendar.getApi().render();
});

[arshaw]

we'll need a repro in codesandbox.io before we can move ahead with a fix

[5im0n]

@arshaw,

I just create a Stackblitz demo of the bug.

The first render is broken.
When we rerender the calendar by clicking on a button (next, prev for instance) or updating an option with a timeout, everything is great.

I don't have this problem with Angular only app, so it may be related with Ionic.

[BrunoLucarelli056]

I'm seeing this issue as well, in an Angular 10 app with Angular Material library. No Ionic.

[kubanm3]

I have two tabs, when you reload site on the other tab then switch to calendar it doesn't render correctly.

[arshaw]

@kubanm3 , could you try calling calendar.updateSize() after the tab switch?

[kubanm3]

It works first time, but then if you switch back and again it is wrong again.

window.dispatchEvent(new Event('resize')); works each time, but there is a short time just after first switch where calendar is wrongly rendered. Then it fixes and stays good.

[rocifier]

I just tried to use fullcalendar in angular and mine looks the same as @kubanm3's screenshot. There are no rows, and the columns are squished.

EDIT: Have tried all the above "hacks" and none of them fix the error 100% of the time. Settings a timeout only works sometimes, I suppose my render times are too slow and occasionally the calendar looks completely broken even with a 300 or 400ms timeout. Does anyone know of a better way without dispatching resize events to the whole window?

So far I've found this crude workaround, which works 100% of the time but can take up to around 1 second (it is worst case timing) and the calendar suddenly jolts into view correctly, because it executes after an ionic animation completes (in my case, I have my calendar inside an ionic modal):

  ionViewDidEnter(): void {
    this.calendarOptions.footerToolbar = false;
  }

[LarsVanderheydt]

Had the same issue in ionic too (worked perfectly without ionic), got it working by calling the .getApi().render() in ionViewWillEnter without any setTimeout.

[rocifier]

Hi, we are depending on this in production now and it has started breaking using window resize event. I have motivation to help fix this. If anyone can point me to the correct render flow I may be able to fix it and submit a PR. @LarsVanderheydt do you think what you did is a production-ready solution? I don't fully understand the ionic flow

[rocifier]

Had the same issue in ionic too (worked perfectly without ionic), got it working by calling the .getApi().render() in ionViewWillEnter without any setTimeout.

I tested this out in my "heavyweight" app which loads two full calendar components at once. It worked for one of them but not for the other one.

[LarsVanderheydt]

@rocifier we're still in development with our fullcalendar implementation so can't really tell you with 100% certainty if it's a production-ready solution, but we hadn't had the issue since the fix in development.

For the fullcalendar that doesn't seem to work, maybe the component you're implementing the ionViewWillEnter on isn't an ionic page? Lifecycles aren't triggered in child components of an ionic page, if that's the issue you should use this fix.

[rocifier]

@rocifier we're still in development with our fullcalendar implementation so can't really tell you with 100% certainty if it's a production-ready solution, but we hadn't had the issue since the fix in development.

For the fullcalendar that doesn't seem to work, maybe the component you're implementing the ionViewWillEnter on isn't an ionic page? Lifecycles aren't triggered in child components of an ionic page, if that's the issue you should use this fix.

Thanks for your reply. The ionViewWillEnter function is being called once and at that time I am asking both calendars to render(). When I inspect the components in a debugger I noticed they both have isRendering: true on the api objects already, I don't know if this means anything. I have now verified that the reason the big calendar works is because later on (around 1 second later) I am updating the events on that one. I have temporarily got both calendars working by taking the point in time that I update the large calendar's events and scheduling a window resize event then. Obviously a very inelegant solution, and the whole page jolts around after a second or two, but it always resolves itself when changing to other tabs and back also.

Below you can see the result of calling render() on both calendars during ionViewWillEnter. The left calendar suffers from the incorrect first rendering bug still and everything is compressed with 0px width. I don't actually think calling render() did anything for the big calendar, it looks correct only after its event stream is loaded in.

[LarsVanderheydt]

@rocifier is it possible to send me a minimal, reproducible example? I tried to render two calendars inside a component on a fresh ionic install and it seemed to work perfectly with .getApi().render(). At first the second calendar didn't render properly because I was using ViewChild instead of ViewChildren but otherwise it's working.

[rocifier]

@rocifier is it possible to send me a minimal, reproducible example? I tried to render two calendars inside a component on a fresh ionic install and it seemed to work perfectly with .getApi().render(). At first the second calendar didn't render properly because I was using ViewChild instead of ViewChildren but otherwise it's working.

Unfortunately not, the problem only occurs using your solution when the app gets quite complex and slows down. I'm making a variety of api calls and some of the calendar event sources are loading in at different times, for example. I also have other tabs loading content in the background.

[rocifier]

@rocifier is it possible to send me a minimal, reproducible example? I tried to render two calendars inside a component on a fresh ionic install and it seemed to work perfectly with .getApi().render(). At first the second calendar didn't render properly because I was using ViewChild instead of ViewChildren but otherwise it's working.

Can you explain what you mean by it not working when you use ViewChild instead of ViewChildren? Because I am using ViewChild twice with two different ids for my calendars

[LarsVanderheydt]

@rocifier if you're using the ViewChild twice with an id you should be fine, I worked with ViewChildren like this:

@ViewChildren(FullCalendarComponent) fullCalendars: FullCalendarComponent[];

this.fullCalendars.forEach(fullCalendar => fullCalendar.getApi().render());

[D1egoR4mirez1999]

Hello everybody, I'm having the same error right now, when the app loads for the first time, the Calendar not render correctly, I did all of test above but It doesn't work yet.
If someone can help me, it would be great.

[D1egoR4mirez1999]

Hello Guys, I was able to fix it.
I was working with angular 9 and Ionic 5, I updated all dependencies (Angular 9 to Angular 13) (Ionic 5 to Ionic 6).
One thing to keep in mind is the use of the encapsulation, because in my project I have several pages and I used encapsulation in one of my components, as a result the calendar styles didn't work correctly
selector: 'app-table', templateUrl: './table.component.html', styleUrls: ['./table.component.scss'], encapsulation: ViewEncapsulation.None
Remember keep in mind this, because it's could be your problem.
I only removed the encapsulation and previously I updated my whole dependencies

[BartKalkman]

I have this issue aswell but in React. It renders all day names (eg. monday) all the way in the upper left corner over each other and does not render a body. Is there a fix for this already?

[stefanosisto]

I have this issue aswell but in React. It renders all day names (eg. monday) all the way in the upper left corner over each other and does not render a body. Is there a fix for this already?

Hello, I have the same issue in React.
Did you find any solution?
For now, I'm trying with window.dispatchEvent(new Event('resize'))... but for 1 second I'm able to see the "broken" calendar and this sound very bad... Please let me know how you have solved it

[tekman-oppsec]

I have this issue aswell but in React. It renders all day names (eg. monday) all the way in the upper left corner over each other and does not render a body. Is there a fix for this already?

Hello, I have the same issue in React. Did you find any solution? For now, I'm trying with window.dispatchEvent(new Event('resize'))... but for 1 second I'm able to see the "broken" calendar and this sound very bad... Please let me know how you have solved it

To get around this I did a setTimeout to call a click event on the month button after the calendar.render().

setTimeout(clickMonthButton, 100); function clickMonthButton() { document.querySelector('.fc-dayGridMonth-button').click(); }

[abdel-ships-it]

@acerix Given we have a reproduction path in #7221, do you think anyone on the team has capacity to pick this up? The calendar is almost unusable in its current state. I'm considering to get the 'Premium' package to get access to resource view, but this bug is holding me off doing that purchase.

[arshaw]

Working editable recreation from #7221:
https://stackblitz.com/edit/ionic6-angular13-3tfnyh?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.ts

[arshaw]

This conversation is very informative about the general issue: ionic-team/ionic-framework#17920

I've created a fix and it's queued for release

[arshaw]

Fixed in v6.1.5

Updated repro: https://stackblitz.com/edit/ionic6-angular13-xcrctf?file=src%2Fapp%2Fapp.module.ts,package.json

We will eventually make the calendar adapt to dimensions changes via ResizeObserver as mentioned in this ticket. However, in the meantime, I needed to write ionic special-case logic in the angular connector which doesn't feel good but works.

[AlexisEspejo]

Hi, I am currently using full calendar version 6.1.8 in angular 15 and the loading problem is happening to me when navigating between components that does not load and only loads when I do a refresh.

[Lo2aiAmer]

I'm still facing this issue with Angular, did anyone had luck with this ?

[esultanovvalley]

Have the same issue in react 17.
Using this work around

  useEffect(() => {
    window.setTimeout(() => {
      window.dispatchEvent(new Event("resize"));
    }, 75);
  });