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

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 2

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 3

The best way is:

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

Answer 4

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

   //do your work 

});


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

   //do your work 

});

Answer 5

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 6

When the next and previous buttons are clicked, the events 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.