Angular - Full calendar changing config based on screen width

Question

I am using Angular and Full Calendar. Is there any way to change to only enable list mode when the width of the screen is small?

HTML (This is where the config is used):

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

TS (This is where data to show is set along with setting the initial config in the 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;
      });
    }
  }

Note the defaultView option in the config, which when set to listMonth, will by default show the listMonth view which is the desired view when the screen is small. Along with this, I can remove the options to view other modes other than list in the header object.

However, I am not sure how to get the angular2-fullcalendar to update the config when the window is resized. I have tried to implement answers such as link, but to no avail. I have also tried to do something like:

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

Where calendarOptionsSmall is another config object with the desired config for a small screen, but, to no avail.

Can anyone help? Thanks.

see how I implemented this in my answer to this post....https://stackoverflow.com/questions/53688140/how-to-get-a-screen-resize-dimension-from-a-service-in-angular-2 — Sandra Willford, Dec 09 '18 at 01:17
Thanks for the implementation Sandra, I took a look, looks good, but, I found an easier way for my specific use case. — Idris.AH, Dec 10 '18 at 21:48

score 0 · Answer 1 · answered Dec 10 '18 at 21:47

After looking more closely at the FullCalendar doc, I realised there is an option to use changeView (Doc). Using this answer, and then in the onResize() method, calling this:

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

With this I can change the view based on the width of the screen. You could take it a step further and customise the header options etc. Of course, this implementation is specific to FullCalendar.

Angular - Full calendar changing config based on screen width

1 Answers1