Javascript 如何在单击上一个和下一个按钮时调用事件？

How to call events on clicking prev and next button?

提问by Neo

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

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

回答by Burak Ogutken

The best way is:

最好的办法是：

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

回答by Nicola Peluchetti

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

回答by streak

This worked for me:

这对我有用：

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

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

回答by Onshop

When the nextand previousbuttons are clicked, the eventsfunction is called. Here is an example to load data for the current year:

当next和previous被点击的按钮，该事件函数被调用。以下是加载当年数据的示例：

$(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 天。

回答by Allfarid Morales García

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

回答by Hyman Le Black

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

回答by Mahavirsinh Padhiyar

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

在事件中声明 Calendar 期间，您可以编写事件的回调函数：

$('#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 - 这是日历数据的集合。您还可以通过传递所选/当前月份的第一个和最后一个日期并处理上一个和下一个事件来调用月明智的函数。

回答by Иво Недев

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.

希望我帮助了某人。

回答by Gianpiero

I see there are other working answers, but IMHO they simplest and more correct - at least using FullCalendar v.4- is to intercept prevand nextis to deal them in the same way of custom buttons.

我看到还有其他有效的答案，但恕我直言，它们最简单，更正确 - 至少使用FullCalendar v.4- 是拦截prev并next以与自定义按钮相同的方式处理它们。

Here my setup (using toastr just for demo purposes)

这是我的设置（仅出于演示目的使用 toastr）

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

在此处查看Codepen

回答by Kanishka Panamaldeniya

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

   //do your work 

});


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

   //do your work 

});