如何从 json 提要将事件加载到 fullcalendar.io答案

【问题标题】：How to load events into fullcalendar.io from a json feed如何从 json 提要将事件加载到 fullcalendar.io
【发布时间】：2023-02-24 02:38:25
【问题描述】：

我坚持使用 fullcalendar.io 和 json 提要将事件加载到日历中。

Json feed 1 with 1 event: 这工作正常 events 是 fetched 来自 url 中的 json 提要并加载到日历中。

[{"id": 9, "title": "test event", "start": "2023-02-22T03:00:00Z", "end": "2023-02-22T01:03:00Z"}]

以及相关的日历代码

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar')
    var calendar = new FullCalendar.Calendar(calendarEl, {

        events: { url : '{% url 'calendar_app:all_events' %}' }, --> working fine

带有 1 个事件的 Json 提要 2：这是 not 工作，再次从 url 中的 json 提要获取事件，但是 json 有一个 different format

{
    "result": [
        {
            "id": 9,
            "title": "test",
            "start": "2023-02-21T04:30:00Z",
            "end": "2023-02-21T06:55:00Z"
        }
    ]
}

我必须做什么才能使用第二个 json 提要将事件加载到日历中。

【问题讨论】：

标签： javascript jquery json django

【解决方案1】：

您需要定义一个函数来获取事件并将其设置为 FullCalendar 构造函数调用中的 events 属性。在此函数中，您将调用事件 API 并解析响应以获取 results 处的事件。然后您将把事件传递给successCallback。文档可以在here 找到。

代码看起来像：

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar')
    var calendar = new FullCalendar.Calendar(calendarEl, {
      events: function(info, successCallback, failureCallback) {
        $.get('{% url 'calendar_app:all_events' %}')
          .done(function (response) {
            successCallback(response.result);
          })
          .fail(function (err) {
            failureCallback(err);
          });
      }
    });
     
    calendar.render();
  });

我正在假设 {% url 'calendar_app:all_events' %} 部分来生成 API URL。

我创建了一个带有模拟 API 调用的示例 here。

【讨论】：