How to call events on clicking prev and next button?

In jQuery fullcalendar we have previous and next buttons. How c开发者_如何学Pythonan we call some events on click of these buttons?

The best way is:

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

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

This worked for me:

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

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

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
    }
});

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

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.

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.

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

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

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.

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.

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

   //do your work 

});


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

   //do your work 

});

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.

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

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

});

});

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...'
})