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(文档(。使用这个答案，然后在onResize((方法中，调用这个：

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

有了这个，我可以根据屏幕的宽度更改视图。你可以更进一步，自定义标题选项等。当然，这个实现是针对FullCalendar的。