How to call events on clicking prev and next button?

问题

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

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

回答2:

The best way is:

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

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

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

回答5:

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.

回答6:

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.

回答7:

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

回答8:

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.

回答9:

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

   //do your work 

});


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

   //do your work 

});

来源：https://stackoverflow.com/questions/6788761/how-to-call-events-on-clicking-prev-and-next-button

标签

javascript

jquery

fullcalendar