I experience a bug on the full calendar library (with Angular), when the calendar is initially hidden (using display:none). As shown on the image, the whole calendar seems shrunk. I managed to fix it by simply triggering a window resize event manually (when the calendar is supposed to be visible (this more like a workaround). triggerResize() { setTimeout(function () { window.dispatchEvent(new Event('resize')); }, 1); } Here is a link to a stackblitz (forked from fullcaldendar's official demo) that illustrates the bug. I just added a "hidden" checkbox (checked by default) the adds a class "hidden" to the parent div. You can also check my workaround by uncommenting the following // this.triggerResize();. https://stackblitz.com/edit/github-mwasuksj?file=src/app/app.component.ts Continue reading...