Search code examples
javascriptangularfullcalendarfullcalendar-4

Calling function whenever full calendar view changes in Angular 8


I am using full calendar in my angular 8 app. Everything is working fine, but I want to call a function whenever the currentView of calendar changes. that is, I want to call a function/event whenever I change its view from month to week, or week to days.

For clarity, I want to detect view template changes (not date range changes). And by detecting it I want to highlight the button of respective current view.

This is my html code.

<p-fullCalendar #fc [events]="allEvents" [options]="options"></p-fullCalendar>

This is my .ts code

this.options = {
      plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
      defaultDate: moment().toDate(),
      themeSystem: 'yeti',
      header: {
        left: 'prev,next',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      }, dateClick: (e) => {
        this.dateClicked(e);
      }, eventClick: (e) => {
        this.eventClicked(e);
      },
    }

Solution

  • In fullCalendar 4 you can use the viewSkeletonRender callback - this runs whenever a new view template is loaded.

    viewSkeletonRender: function(info)
    {
      console.log(info); //replace with whatever code you need.
    }
    

    UPDATE: As per https://fullcalendar.io/docs/v5/upgrading-from-v4 , since v5 this function has been superseded by viewDidMount.