fullcalendar appear after window resize only | angular

Question

I installed fullCalendar in my project but the calendar appears only when screen is resized.

I added this code in home.module.ts

import { FullCalendarModule } from '@fullcalendar/angular'; // the main connector. must go first
import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin
import interactionPlugin from '@fullcalendar/interaction'; // a plugin


FullCalendarModule.registerPlugins([ // register FullCalendar plugins
  dayGridPlugin,
  interactionPlugin
]);

@NgModule({
  imports: [
    ....
    FullCalendarModule, // for FullCalendar!
   ....


  ],

In home.page.ts i added following code

import { Calendar } from '@fullcalendar/core'; // include this line
import { CalendarOptions  } from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin
export class HomePage {

  calendar = Calendar;
  calendarVisible = false;

  calendarOptions: CalendarOptions = {
    plugins: [dayGridPlugin],
    initialView: 'dayGridMonth',
    // initialView: 'dayGridWeek'
  };

  constructor() {
    // const name = Calendar; // add this line in your constructor

  }

  ngOnInit() {
    this.calendarVisible = true;
  }

After this i added simple html from there guide to angular component page.

<ion-content class="ion-padding">
  <full-calendar *ngIf="calendarVisible" [options]="calendarOptions"></full-calendar>


</ion-content>

there are no css its bare minimum setup.

A picture is useful, but we can't fix pictures. We would also need to see enough code to be able to reproduce the problem — ADyson, Dec 03 '20 at 07:33
what do you mean "there are no css"? fullCalendar has at least one CSS file you must include, and some of the plugins also add extra ones. This may be handled by your build system, but perhaps you need to verify it, because you clearly have a problem. — ADyson, Dec 03 '20 at 09:34
@ADyson it adds css automatically once we add library as instructed in there doc. "There are no css" means i have not implemented any custom css till now. also once i resize window it fits perfect and all days everything appears as expected. — pkworlz, Dec 04 '20 at 07:21

score 1 · Answer 1 · answered Apr 13 '21 at 19:50

1

Adding it in the ionViewWillEnter life cycle did the trick for me.

calendarOptions: CalendarOptions;

ionViewWillEnter() {
    this.calendarOptions = {
      height: 'auto',
      headerToolbar: {
          left: 'prev,next',
          center: 'title',
          right: 'dayGridMonth,listWeek'
      },
      
      initialView: 'dayGridMonth',
      initialDate: new Date(),
      
    };
  }

answered Apr 13 '21 at 19:50

kabz

13
2

Note that this only works in pages, because plain (Angular) components do not have that lifecycle event. You can make a workaround with setTimeout though or you need to notify the component when the parent page has finished loading. – andreas Jan 11 '22 at 21:47

score 0 · Answer 2 · answered Mar 21 '22 at 16:40

0

I used setTimeout to load calendarOptions and it worked for me.

calendarOptions: CalendarOptions;

setTimeout(() => { this.calendarOptions= { initialView: 'dayGridMonth', ... }; },1);

answered Mar 21 '22 at 16:40

dinesha priyadarshani

1

but it looks as workaround, it doesn't explain why it actually doesn't appear before window resize and do not guaranty that it works in 100% – knst Mar 21 '22 at 18:05

score -1 · Answer 3 · edited May 21 '21 at 11:23

-1

I also had a similar situation for which that I rendered the entire calendar again and it worked.

edited May 21 '21 at 11:23

Eric Aya

69,473
35
181
253

answered May 21 '21 at 10:52

ingenious_techie

1
2

fullcalendar appear after window resize only | angular

3 Answers3