CODEWITHSUNDEEP
javascriptangularfullcalendarfullcalendar-4
Vaibhav Thangriyal
Vaibhav Thangriyal

Reputation: 23

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);
      },
    }

Upvotes: 1

Views: 3273

Answers (1)

ADyson
ADyson

Reputation: 61904

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.

Upvotes: 2

Related Questions