如何在 Angular 中为 FullCalendar 设置多个属性

Question

我正在尝试在 Angular 应用程序中为 FullCalendar 设置一些特定选项，例如 locale、themeSystem。我在网上发现人们正在使用 [options] 属性设置这些选项，但对于 FullCalendar 版本 4 似乎没有这样的属性.

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

我也尝试使用 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>

但我明白了

ERROR TypeError: Cannot read property 'setOptions' of undefined

如何在不为 class 中的每个属性创建的情况下设置多个选项？

Answer 1

这个错误意味着这个 setOption 不存在于这个对象中，检查你的日历参考，当你设置选项时它是否正确初始化，有时日历处于初始化阶段并且我们正在设置值。在 SetTimeOut 中添加 500 毫秒的选项，例如 this.in 500 毫秒，您的日历将初始化

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

或者你可以使用这个 ngAfterViewInit

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

如何在 Angular 中为 FullCalendar 设置多个属性

How to set multiple properties for FullCalendar in Angular

angular

fullcalendar

fullcalendar-4