Angular - полная настройка календаря с учетом ширины экрана

Question

Я использую Angular и Full Calendar.Есть ли способ изменить режим включения списка только при малой ширине экрана?

HTML (здесь используется конфигурация):

<div class="calendar-container">
  <angular2-fullcalendar #calendar [options]="calendarOptions" (initialized)="onCalendarInit($event)"></angular2-fullcalendar>
</div>

TS (этогде данные для отображения устанавливаются вместе с настройкой начальной конфигурации в ngOnInit):

calendarOptions: any;

ngOnInit() {

    this.innerWidth = window.innerWidth;

    //Set general calendar options
    this.calendarOptions = {
      //defaultView: 'listMonth'
      height:500,
      editable: true,
      eventLimit: false,
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listMonth'
      },
      eventClick: (calEvent, jsEvent, view) => {
        //Open the dialog with event info
        this.openDialog(calEvent);
      }
    }
}

  onCalendarInit(e:boolean) {
    if(e) {

    this.subjectEventsService.subscribeToDataServiceGetSubjectEvents().subscribe(data=>{
        this.ucCalendar.fullCalendar('removeEvents');
        this.ucCalendar.fullCalendar('addEventSource', data);
        this.eventsList = data;
      });
    }
  }

Обратите внимание на параметр defaultView в конфигурации, который при значении listMonth по умолчанию покажет listMonth вид, который является желаемым видом при небольшом экране.Наряду с этим, я могу удалить опции для просмотра других режимов кроме списка в объекте header.

Однако я не уверен, как получить angular2-fullcalendar для обновления конфигурации, когда окноизменен.Я пытался реализовать такие ответы, как ссылка , но безрезультатно.Я также пытался сделать что-то вроде:

<div class="calendar-container">
  <angular2-fullcalendar #calendar [options]="window.innerWidth > 768 ? calendarOptions : calendarOptionsSmall" (initialized)="onCalendarInit($event)"></angular2-fullcalendar>
</div>

Где calendarOptionsSmall - это другой объект конфигурации с желаемой конфигурацией для небольшого экрана, но безрезультатно.

Может кто-нибудь помочь?Спасибо.

Answer 1

После более внимательного изучения документа FullCalendar я понял, что есть возможность использовать changeView ( Doc ).Используя этот ответ , а затем в методе onResize (), вызывая это:

if(this.innerWidth < 768){
    this.ucCalendar.fullCalendar('changeView', 'listMonth');
}else{
    this.ucCalendar.fullCalendar('changeView', 'month');
}

С этим я могу изменить представление в зависимости от ширины экрана.Вы могли бы пойти дальше и настроить параметры заголовка и т. Д. Конечно, эта реализация специфична для FullCalendar.