Question

动态数据未添加到fullCalendar中的事件中。我在这里使用AJAX来获得响应，并将其存储在我的＆＃34;事件＆＃34;阵列：

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

Answer 1

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

https://fullcalendar.io/docs/events-function处的描述清楚地表明，事件功能提供了许多重要参数。

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

然而＆＃34;回调＆＃34;参数非常重要。这包含一个在获取事件时必须调用的函数，并将事件列表传递给它。这是一种机制，通过该机制，您可以将已提取的事件提供给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!
    }
  });
},

P.S。上面的示例仅涉及向日历添加一个事件，并且您假设JSON仅包含一个事件。这可能很好，你想要什么，但它在现实生活中听起来有点不太可能，所以你可能想要考虑这是一个好方法，还是你应该从服务器返回一个事件列表。 / p>

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

1 个答案: