Как установить несколько свойств для FullCalendar в Angular - PullRequest
Новая
       18

Как установить несколько свойств для FullCalendar в Angular

0 голосов
/ 10 мая 2019

Я пытаюсь установить некоторые конкретные параметры для FullCalendar в приложении Angular, например locale, themeSystem.В Интернете я обнаружил, что люди устанавливают эти параметры с помощью свойства [options], но, похоже, для FullCalendar версии 4 такого свойства не существует.

параметры свойства не предоставляются ни однимприменимые директивы, ни элементом fullcalendar

Я также пытался использовать 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>

Но я получаю это

ОШИБКА TypeError:Не удается прочитать свойство 'setOptions' из неопределенного

Как установить несколько параметров, не создавая для каждого свойства в классе?

1 Ответ

1 голос
/ 10 мая 2019

эта ошибка означает, что этот 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();
}
...