首页 文章

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

提问于
浏览 次
0

我正在使用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 是另一个具有所需配置的小屏幕的配置对象，但无济于事 .

有人可以帮忙吗？谢谢 .

angular typescript fullcalendar angular6 window-resize

1 回答

  • 0

    在仔细查看FullCalendar文档之后，我意识到有一个选项可以使用 changeView （Doc） . 使用这个answer，然后在onResize（）方法中，调用：

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

    有了这个，我可以根据屏幕的宽度更改视图 . 您可以更进一步，并自定义 Headers 选项等 . 当然，此实现特定于FullCalendar .

    回复于

相关问题