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

时间:2019-05-10 20:18:42

标签: angular fullcalendar fullcalendar-4

我正在尝试为Angular应用中的t.references设置一些特定选项,例如FullCalendarlocale。我在网络上发现人们正在使用themeSystem属性设置这些选项,但似乎对于[options]版本4来说没有这样的属性。

  

任何适用的指令或fullcalendar元素均未提供属性选项

我也尝试使用api。

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

但是我明白了

  

ERROR TypeError:无法读取未定义的属性'setOptions'

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

1 个答案:

答案 0 :(得分:1)

此错误表示此setOption不存在于此对象中,请检查您的日历引用,是否在设置选项时正确初始化,有时日历处于初始化阶段,并且我们正在设置值。像这样在SetTimeOut中添加500毫秒的选项。在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();
}