时间戳

首页 > 解决方案 > FullCalendar - 动态添加事件不起作用

jquery - FullCalendar - 动态添加事件不起作用

问题描述

动态数据未添加到 fullCalendar 中的事件中。我在这里使用 AJAX 来获得响应，并将其存储在我的“事件”数组中：

events: function () {
    var events = [];
    jQuery.ajax({
      url: '/employee/leave/2',
      type: 'GET',
      dataType: 'json',
      data: '',
      success: function (doc) {
        console.log(doc)

        if (doc != null) {
          events.push({
            id: doc.id,
            title: doc.reason,
            start: "2018-5-22",
            // end: doc.to_date
          });
        }
      }
    });
},

标签： jqueryajaxfullcalendar

解决方案

如果您准确完整地遵循文档，这将非常简单。

https://fullcalendar.io/docs/events-function上的描述清楚地表明，事件函数具有许多提供给它的重要参数。

“开始”、“结束”和“时区”参数用于发送到服务器，告诉它将结果限制为当前实际显示在日历上的日期（fullcalendar 将向服务器发出另一个请求以获取更多事件如果用户移动到另一个日期范围，例如下个月）。这在技术上是可选的，因此如果它对您的用例不重要，您可以忽略它们。

然而，“回调”参数非常重要。这包含一个函数，当您获取事件时必须调用该函数，并将事件列表传递给它。这是您将获取的事件提供给 fullCalendar 以显示它们的机制。如果您不这样做，则不会显示任何内容。

所以只需将您的代码更改为：

events: function( start, end, timezone, callback ) { //include the parameters fullCalendar supplies to you!

  var events = [];

  jQuery.ajax({
    url: '/employee/leave/2',
    type: 'GET',
    dataType: 'json',
    data: '',
    success: function (doc) {
      console.log(doc)

      if (doc != null) {
        events.push({
          id: doc.id,
          title: doc.reason,
          start: "2018-5-22",
          // end: doc.to_date
        });
      }

      callback(events); //you have to pass the list of events to fullCalendar!
    }
  });
},

PS 您上面的示例仅涉及向日历添加一个事件，并且您假设 JSON 仅包含一个事件。这可能没问题，也是您想要的，但在现实生活中听起来确实不太可能，因此您可能需要考虑这是否是一种好方法，或者您是否应该从服务器返回事件列表。

推荐阅读