jquery fullcalendar：在fullcalendar中单击prev和next按钮调用事件

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

在jquery fullcalendar中，我们有前一个和下一个按钮。如何点击这些按钮调用某些事件？

9 个解决方案

#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

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.

单击它们时，将触发viewRender事件。您也可以在其中添加代码。

$('#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.

在查询中检索结果时，请确保至少包括上一年的最后10天和下一年的前10天。

#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.

// eventsarray - 这是日历数据的集合。您还可以通过传递所选/当前月份的第一个和最后一个日期来处理月份功能，并处理上一个和下一个事件。

#9

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

   //do your work 

});


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

   //do your work 

});