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来更新配置。我试图实现诸如link之类的答案，但无济于事。我也曾尝试做类似的事情：

<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）。使用此answer，然后在onResize（）方法中，调用此方法：

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

这样，我可以根据屏幕的宽度更改视图。您可以更进一步，自定义标题选项等。当然，此实现特定于FullCalendar。

Angular-基于屏幕宽度的完整日历更改配置

1 个答案: