how to catch next, prev, today event with fullcalendar for Angular 7 cli

Question

I am implementing fullCalendar in my Angular 7 app, the calendar is working and i am importing some Events to it, but i am trying to do it more efficent, i am trying to bring just the events that the calendar needs.

So.. i have some questions.

How can i get the click event in the Prev or Next or Today button?

How can i get the current Date?

I have been checking the documentation... but there are only examples for jquery...

Here i copy my HTML

  <full-calendar id="calendar" *ngIf="options" #fullcalendar [editable]="true" [events]="citas"
    [header]="options.header" [locale]="options.locale" [customButtons]="options.customButtons"
    (dateClick)="dateClick($event)" [plugins]="options.plugins" (eventClick)="eventClick($event)" [eventLimit]="4">
  </full-calendar>

And my Ts

  @ViewChild('fullcalendar') fullcalendar: FullCalendarComponent;

  constructor() {
    this.options = {

      editable: true,
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth, listDay'
      },
      plugins: [dayGridPlugin, listPlugin, timeGridPlugin],
      locale: esLocale,
    };

  }

Answer 1

According to plugin's docs , you have access to the underlying Calendar object for raw data and methods:

const calendarApi = this.calendarComponent.getApi();

The complete list of methods for Date Navigation the can be found here: https://fullcalendar.io/docs/date-navigation .

So, to get the current date we can use: calendarApi.getDate(); .

The following code should work:

export class AppComponent {

  // references the #calendar in the template
  @ViewChild('calendar') calendarComponent: FullCalendarComponent;


  someMethod() {
    const calendarApi = this.calendarComponent.getApi();
    const currentDate = calendarApi.getDate();
    console.log("The current date of the calendar is " + currentDate);
  }
  
}

I haven't found any events emitted for prev and next buttons, but you can build your own buttons by using calendar.prev() and calendar.next() methods.

  goPrev() {
    const calendarApi = this.calendarComponent.getApi();
    calendarApi.next(); // call a method on the Calendar object
  }

Answer 2

I now I'm late, but I want to shar with your my solution, so: in your calendarOptions, you can add customButtons property, then add your newNextFunct to fullCalendar function like this:

customButtons: {
    next: {
        click: this.nextMonth.bind(this),
    },
    prev: {
        click: this.prevMonth.bind(this),
    },
    today: {
        text: "Aujourd'hui",
        click: this.currentMonth.bind(this),
    },
},

your newNextFunction named as nextMonth must be like this:

nextMonth(): void {
    console.warn('nextMonth');
    this.calendarApi = this.calendarComponent.getApi();
    this.calendarApi.next();
}