fullcalendar appear after window resize only | angular

user_4514562 0
Viewed 531

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

enter image description here

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.

fullcalendar-5 angular fullcalendar css html
3 Answers

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(),
      
    };
  }
user_72538160

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

calendarOptions: CalendarOptions;

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

user_103599660

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

user_137915050
Related