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

Posted 2023-03-05

【中文标题】Angular - 基于屏幕宽度的完整日历更改配置

【英文标题】：Angular - Full calendar changing config based on screen width

【发布时间】：2019-05-10 08:12:11

【问题描述】：

我正在使用 Angular 和完整日历。有什么办法可以改成只在屏幕宽度小的时候开启列表模式？

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

有人可以帮忙吗？谢谢。

【问题讨论】：

看看我是如何在我对这篇文章的回答中实现的......***.com/questions/53688140/…

感谢 Sandra 的实施，我看了看，看起来不错，但是，我找到了一种更简单的方法来满足我的特定用例。

【参考方案1】：

在仔细查看 FullCalendar 文档后，我意识到可以选择使用 changeView (Doc)。使用这个answer，然后在 onResize() 方法中，调用这个：

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

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