如何将 JSON 值发送到 FullCalendar 并在日历中显示事件

Question

0:
Title: "start"
description: "yes"
end: 1609286400000
id: 210
name: "xyz"
start: 1609286400000

这是我想在完整日历中显示的数组。

这里是javascript代码

$('#calendar').fullCalendar({
    // ... your code
    events: {
        url: "/appointments/get_events/",
        success: function(response) {
             results = JSON.parse(response)
             console.log(results)
             for (var i = 0; i < results.events.length; i++) {
               var counter = results.events[i];
               var title = counter.Title
               var start = counter.start

             }
        }
    },

    });

我不知道如何将数组值发送到日历。我尝试了太多解决方案，但无法理解。任何人帮助我。我正在使用 fullCalendar 1.6.4。

Answer 1

如果您需要在下载事件数据后对其进行一些自定义处理，那么您需要使用 in the documentation 中描述的事件即函数模式。然后，您将获得一个回调函数，用于将事件传递回 fullCalendar。

唯一的缺点是这意味着您需要自己负责管理 AJAX 调用。这是一个使用fetch()的简单示例

events: function(start, end, callback) {
   fetch("/appointments/get_events/")
     .then((resp) => resp.json()) // Transform the JSON data into a variable
     .then(function(data) { 
        var eventsList = [];
        for (var i = 0; i < data.events.length; i++) {
          var event = {
            title: data.events[i].Title,
            start: moment(data.events[i].start)
          };
          eventsList.push(event);
        }
        callback(eventsList);
     });
}

演示：http://jsfiddle.net/Le507sqb/1/

当然，另一种方法是修改您的服务器端代码，以便它以 fullCalendar 可以理解的正确格式输出 JSON。如果你这样做了，那么你可以简单地指定你的事件 URL 并让 fullCalendar 完成其余的工作：

events: "/appointments/get_events/"