How to call events on clicking prev and next button?

Question

In jQuery fullcalendar we have previous and next buttons. How can we call some events on click of these buttons?

Answer 1

This worked for me:

$('body').on('click', 'button.fc-prev-button', function() {
  //do something
});

$('body').on('click', 'button.fc-next-button', function() {
  //do something
});

Answer 2

When you click them, viewRender event is triggered. You could add your code inside it as well.

$('#calendar').fullCalendar({
    viewRender: function(view, element) {
        //Do something
    }
});

Answer 3

Just a quick update, no idea for how long but the accepted answer works for me like this:

$('.fc-prev-button').click(function(){
   alert('prev is clicked, do something');
});

$('.fc-next-button').click(function(){
   alert('nextis clicked, do something');
});

Notice slight change,

also on today click is as follows:

$(".fc-today-button").click(function () {

Hope i helped someone.

Answer 4

I see there are other working answers, but IMHO the simplest and more correct - at least using FullCalendar v.4 - is to intercept prev and next is to deal them in the same way of custom buttons.

Here my setup (using toastr just for demo purposes)

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid', 'timeGrid' ],
    header: {
      left: 'dayGridMonth,timeGridWeek,timeGridDay',
      center: 'title',
      right: 'prev,next'
    },
    footer: {
      left: '',
      center: '',
      right: 'prev,next'
    },
    customButtons: {
      prev: {
        text: 'Prev',
        click: function() {
                    // so something before
                    toastr.warning("PREV button is going to be executed")
                    // do the original command
                    calendar.prev();
                    // do something after
                    toastr.warning("PREV button executed")
        }
      },
      next: {
        text: 'Next',
        click: function() {
                    // so something before
                    toastr.success("NEXT button is going to be executed")
                    // do the original command
                    calendar.next();
                    // do something after
                    toastr.success("NEXT button executed")
        }
      },
    }
  });

  calendar.render();
});

See a Codepen here

Answer 5

Another solution is to define your custom prev/next button:

$('#m_calendar').fullCalendar({
 header: {
         left: 'customPrevButton,customNextButton today',
         center: 'title',
 },
 customButtons: {
                customPrevButton: {
                    text: 'custom prev !',
                    click: function () {
                        alert('custom prev ! clicked !');

                    }
                },
                customNextButton: {
                    text: 'custom ext!',
                    click: function () {
                       alert('custom ext ! clicked !');
                    }
                },
            }
});