Full calendar event bind to custom button for next prev, month week and day view in Angular

Viewed 1617

I have used fullcalendar in my angular project. I want to bind default methods like pre, next, month views, week view and day view to custom button.

Please help me with this. enter image description here

2 Answers

I got the solution we need to do something like this.

someMethod() {
    let calendarApi = this.calendarComponent.getApi();
    calendarApi.next(); // For next
    calendarApi.prev(); // For prev
    calendarApi.changeView('timeGridDay'); // changing view
    calendarApi.changeView('timeGridDay', '2017-06-01'); // change view for specific date
    calendarApi.changeView('timeGrid', {
                         start: '2017-06-01',
                         end: '2017-06-05'
                    }); // For changing week view or month view accodring to date.
  }

Thank you @ADyson for your time and support

Put the below code where you initialised the calendar.

this.calendarOptions = {


customButtons: {
   prev: { // this overrides the prev button
     text: 'PREV',
     click: () => {
     const calendarApi = this.calendarComponent.getApi();
     calendarApi.prev();
   }
   },
   next: { // this overrides the next button
     text: 'NEXT',
     click: () => {
     const calendarApi = this.calendarComponent.getApi();
     calendarApi.next();
    }
  },
   dayGridMonth: { // this overrides the month button
      text: 'Month',
      click: () => {
        const calendarApi = this.calendarComponent.getApi();
        calendarApi.changeView('dayGridMonth');
      }
    },
    timeGridWeek: { // this overrides the week button
      text: 'Week',
      click: () => {
        const calendarApi = this.calendarComponent.getApi();
        calendarApi.changeView('dayGridMonth');
      }
    },
    timeGridDay: { // this overrides the day button
      text: 'Day',
      click: () => {
        const calendarApi = this.calendarComponent.getApi();
        calendarApi.changeView('dayGridMonth');
      }
    }
}
Related