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

Question

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

Answer 1

最好的方法是

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

Answer 2

您可以将事件简单地附加到按钮:

$('.fc-button-prev span').click(function(){
   alert('prev is clicked, do something');
});

$('.fc-button-next span').click(function(){
   alert('nextis clicked, do something');
});

Answer 3

这对我有用 -

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

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

Answer 4

FULLCALENDAR 版本 5 中的解决方案：

如果您使用的是 FullCalendar 版本 5，我建议您使用datesSet而不是使用.click().

datesSet: function() {
    myFunction();
}

myFunction()每次更改或初始化日历的日期范围时都会调用该方法。换句话说，当您单击日历中提供的上一个/下一个按钮时，日历的日期范围将被更改并被myFunction()调用。

参考： https: //fullcalendar.io/docs/datesSet

如果您确实想遵循这种.click()方式，以下代码适用于 FullCalendar 版本 5。

$('.fc-prev-button').click(function(){
    myFunction();
});

$('.fc-next-button').click(function(){
    myFunction();
});

这两种方法在我的项目（FULLCALENDAR 版本 5）中都可以完美工作，希望这可以帮助那些正在解决这个问题的人。

Answer 5

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

$('#calendar').fullCalendar({
    viewRender: function(view, element) {
        //Do something
    }
});

Answer 6

单击"下一个"和"上一个"按钮时,将调用事件函数.以下是加载当前年度数据的示例:

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

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

Answer 7

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

这是我的设置（仅出于演示目的使用 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();
});

在此处查看Codepen

Answer 8

版本 3的答案是使用：

viewRender: function (event, element, view){
// you code here
}

版本 4：https : //fullcalendar.io/docs/v4/datesRender

datesRender: function (){
    // you code here
    }

https://fullcalendar.io/docs/v4/upgrading-from-v3

“ viewRender重命名为dateRender。参数已更改。”

版本 5使用：

datesSet: function (){
    // you code here
    }

“ datesRender更改为：datesSet - 从datesRender 重命名。在视图的日期初始化或更改时调用。” https://fullcalendar.io/docs/upgrading-from-v4