Fullcalendar V4:如何将从 ajax 收到的 json 解析为事件列表

Question

我正在尝试从ajax调用中检索事件列表。我使用以下代码。

document.addEventListener("DOMContentLoaded", function()
 { var calendarEl = document.getElementById("id_d_agenda_1");
   var calendar = new FullCalendar.Calendar(calendarEl, {
     plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
     header: {
       left: 'prev,next today',
       center: 'title',
       right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
     },
     defaultDate: '2019-08-12',
     editable: true,
     navLinks: true, // can click day/week names to navigate views
     eventLimit: true, // allow "more" link when too many events
           selectMirror: true,
     select: function(arg) {
       var title = prompt('Event Title:');
       if (title) {
         calendar.addEvent({
           title: title,
            start: arg.start,
                end: arg.end,
                allDay: arg.allDay
               })
             }
            calendar.unselect()
           },
     events: function(arg) {
       $.ajax({
           url: 'd.php',
           dataType: 'json',
           data: {
              cmd:'getdata',
              start:arg.startStr,
              end:arg.endStr,
              tz:arg.timeZone,
              component:'d_agenda_1',
           },
           success: function(doc) {
                $(doc).each(function() {
                   calendar.addEvent( this );
                })
           }
       }) 
    } 
  })
     calendar.render(); 
});

在调试我的javascript时，我可以看到事件行出现在"doc"中。首先，我尝试将它们批量添加到议程中，但这似乎不起作用。现在我一个接一个地添加它们，它们仍然没有出现。我已经在调试器中检查了这个变量，它显示了一个事件： 标题："值"，开始："2019-08-01"。实际上，我正在使用软件包附带的示例列表。有人能指出我做错了什么的正确方向吗？

我尝试过的其他选项(没有运气;-(： 我试图省略jquery，但效果类似：

    success: function(doc) {
            doc.forEach(function(value) {
               calendar.addEvent( value );
            })
       }
    success: function(doc) {
         $(doc).each(function() {
            calendar.addEvent({
                  title:this.title,
                  start:this.start
               });
       })

不确定它是否有帮助，但我添加了可选选项并测试了选择选项。选择：上的 calendar.addevent 也不会添加事件。由于这是从示例中复制的，我现在很困惑。有趣的是，如果您将 ajax 部分替换为正则 [] 表达式，则一切运行良好。即使是可选的选项，所以关于这个组件，我的 ajax 实现肯定有问题。

Answer 1

根据 DOCS，您需要有一个将事件返回到日历的successCallback。

这是文档 https://fullcalendar.io/docs/events-function

这是一个简单的演示 https://codepen.io/nasser-ali-karimi/pen/gOOJrWV?editors=0010

简而言之，我可以说您需要像这样设置事件。

events: function(info, successCallback, failureCallback) {
      successCallback([
        {"resourceId":"a","title":"event 1","start":"2019-11-23","end":"2019-11-25"},
        {"resourceId":"b","title":"event 3","start":"2019-11-24T12:00","end":"2019-11-25T06:00"},
        {"resourceId":"b","title":"event 4","start":"2019-11-24T07:30","end":"2019-11-24T09:30"},
        {"resourceId":"b","title":"event 5","start":"2019-11-24T10:00","end":"2019-11-24T15:00"},
        {"resourceId":"a","title":"event 2","start":"2019-11-24T09:00","end":"2019-11-24T14:00"}
      ])
    }

您没有提到来自 Ajax 请求的事件数据，所以我可以说您需要提供像文档上所说的那样的数据。

<小时 />

加法

注意：活动的日期是 11/28 和 11,29，因此请导航到这些日期以查看事件。

演示 https://codepen.io/nasser-ali-karimi/pen/qBBGVbG?editors=0010

events: function(info, successCallback, failureCallback) {
    var arrevents = [];
    jQuery.get( "https://api.myjson.com/bins/16ubhe", function( data ) {
      
      // var response = JSON.parse(data);
      // $.each(response, function(k, v) {
      //     arrevents.push(v);
      // });
      arrevents = data;
      successCallback(arrevents);
    });
},