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' 中。首先，我尝试将它们批量添加到议程中，但这似乎不起作用。现在我添加它们 one-by-one，但它们仍然没有出现。我已经在调试器中检查了这个变量，它显示了一个事件：标题："value"，开始：“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
               });
       })

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

Answer 1

根据 DOCS，您需要 successCallback 将事件 return 加入日历。

Here is the docs https://fullcalendar.io/docs/events-function

Here is a simple Demo 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，因此导航到这些日期以查看活动。

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

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

Fullcalendar V4: How to parse json received from ajax into event list

fullcalendar