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

The best way is:

viewRender: function(view, element) {
  var b = $('#calendar').fullCalendar('getDate');
  alert(b.format('L'));
},

Answer 2

You couldsimply attach an event to the button:

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

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

Answer 3

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 4

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 5

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 6

When the next and previous buttons are clicked, theevents function is called. Here is an example to load data for the current year:

$(document).ready(function() {
  loadCal();
});

function loadCal() {

  var current_url = '';
  var new_url = '';

  $('#calendar').fullCalendar({

    // other options here...

    events: function(start, end, callback) {

      var year = end.getFullYear();

      new_url = '/api/user/events/list/' + id + '/year/' + year;

      if (new_url != current_url) {

        $.ajax({
          url: new_url,
          dataType: 'json',
          type: 'POST',
          success: function(response) {

            current_url = new_url;
            user_events = response;

            callback(response);
          }
        })
      } else {
        callback(user_events);
      }
    }
  })
}

When you retrieve the results in a query, make sure you include at least the last 10 days from the previous year and the first 10 days from the next year.

Answer 7

Version 3 the answer is to use:

viewRender: function (event, element, view){
// you code here
}

---

Version 4 : https://fullcalendar.io/docs/v4/datesRender

datesRender: function (){
    // you code here
    }

https://fullcalendar.io/docs/v4/upgrading-from-v3

" viewRender Renamed to datesRender . Parameters have changed."

---

Version 5 Use:

datesSet: function (){
    // you code here
    }

" datesRender changed to: datesSet - renamed from datesRender. Called after a view's dates are initialized or when they change." https://fullcalendar.io/docs/upgrading-from-v4

Answer 8

SOLUTION IN FULLCALENDAR VERSION 5:

If you're using version 5 of FullCalendar, I will suggest u to use the datesSet instead of using the .click() .

datesSet: function() {
    myFunction();
}

The myFunction() will be called every time when the date range of calendar has been changed or initialised. In other word, when u click on the provided prev/next buttons in the calendar, the calendar's date range will be changed and the myFunction() will be called.

reference: https://fullcalendar.io/docs/datesSet

If u really want to go with the .click() way, the following code is working for version 5 of FullCalendar.

$('.fc-prev-button').click(function(){
    myFunction();
});

$('.fc-next-button').click(function(){
    myFunction();
});

Both methods are perfectly work in my project (VERSION 5 OF FULLCALENDAR), hope this can help people who are struggling with the issue.

Answer 9

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

Answer 10

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 11

During declaration of Calendar in events you can write the event's callback function:

$('#calender').fullCalendar({

events:  function (start, end, timezone, callback) {
                    callback(eventsarray);
                }
});

//eventsarray - This is a collection of data of the calendar. You can also call month wise function in this by passing first and last date of selected / current month and handle prev and next event.

Answer 12

Instead of click use on

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

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

this is useful when your calendar can dynamically initialize at any point of time.

Answer 13

$('.fc-button-next span').click(function(){

   //do your work 

});


$('.fc-button-prev span').click(function(){

   //do your work 

});

Answer 14

If you didn't make it with the answers above, try this:

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

$('span.fc-button.fc-button-next.fc-state-default.fc-corner-right').click(function() {
    alert('next is clicked, do something');
});

Answer 15

FullCalendar v3.4.0

Prev, next. today, week, month buttons:

$(document).ready(function(){

$('#mycalendar').fullCalendar({


$('.fc-prev-button').click(function(){
        alert("Clicked prev button");
    });

    $('.fc-next-button').click(function(){
        alert("Clicked next button");
    });

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

    $('.fc-listWeek-button').click(function(){
        alert('list week clicked, do something');
    });

    $('.fc-listMonth-button').click(function(){
        alert('list month clicked, do something');
    });

});

});

Answer 16

Version 6
Why not a fairly effective more globale solution with few code... pure js

document.querySelectorAll(('.fc-button')).forEach(button => {
    button.onclick = () => 'do something...'
})