How to set multiple properties for FullCalendar in Angular

Question

I'm trying to set some specific options for FullCalendar in Angular app, like locale, themeSystem. I found on the web that people are setting those options with [options] property, but it seems that for FullCalendar version 4 there isn't such property.

property options is not provided by any applicable directives nor by fullcalendar element

I tried also to use api.

import { Component, OnInit, ViewChild } from '@angular/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import { FullCalendarComponent } from '@fullcalendar/angular';
import { OptionsInput } from '@fullcalendar/core/types/input-types';

export class AppComponent implements OnInit {

  @ViewChild('calendar') calendarComponent: FullCalendarComponent;

  options: OptionsInput;

  constructor() {

  }

  calendarPlugins = [dayGridPlugin];

  ngOnInit(): void {
    this.options = {
      locale: 'pl',
      themeSystem: 'bootstrap'
    };
    const api = this.calendarComponent.getApi();
    api.setOptions(this.options);
    api.render();
  }
}

<full-calendar
  #calendar
  defaultView="dayGridMonth"
  [plugins]="calendarPlugins">
</full-calendar>

But I get this

ERROR TypeError: Cannot read property 'setOptions' of undefined

How can I set multiple options without creating for each property in class?

Answer 1

this error means this setOption is not present in this object, check your calendar reference, is it initialize properly when you sets the option, sometime calendar is in initialize phase and we are setting the values. add options in SetTimeOut with 500milisecond like this.in 500ms you calendar will initialize

          ngOnInit(): void {
            this.options = {
              locale: 'pl',
              themeSystem: 'bootstrap'
            };
           setTimeout(()=>{ 
    const api = this.calendarComponent.getApi();
            api.setOptions(this.options);
            api.render();
           },500);
          }
    }

or you can use this ngAfterViewInit

   ngAfterViewInit(){
     const api = this.calendarComponent.getApi();
                api.setOptions(this.options);
                api.render();
}