使用事件（作为函数）v4 的问题

Question

正在尝试使用 events (as a function) 从 geojson 导入数据，但无法显示任何内容。我的具体案例缺少 v4 示例，这对我来说很困难，也没有错误。我的代码如下。 'eventlist' 是根据我在 myevents 函数中的 debug.log(eventlist) 正确制作的。由于某种原因，我的活动没有显示。

任何帮助都会很棒

<html lang='en'>

  <head>
    <meta charset='utf-8' />
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <link href='https://unpkg.com/@fullcalendar/core@4.2.0/main.min.css' rel='stylesheet' />
    <link href='https://unpkg.com/@fullcalendar/daygrid@4.2.0/main.min.css' rel='stylesheet' />
    <script src='https://unpkg.com/@fullcalendar/core@4.2.0/main.min.js'></script>
    <script src='https://unpkg.com/@fullcalendar/daygrid@4.2.0/main.min.js'></script>
  </head>
  <body><div id='calendar' class="mycal"></div></body>




    <script>

    function myevents()
    {
        var eventlist = [];
        var script = document.createElement('script');
        script.src = 'https://uploads-ssl.webflow.com/5b5a1fce48210813dc66ccb6/5d2f8540e5892f506213cb11_Output.txt';
        document.getElementsByTagName('head')[0].appendChild(script);
        window.eqfeed_callback = function(results)
        {
            for (var i = 0; i < results.features.length; i++)
            {
                var obj = {};
                obj['title'] = results.features[i].properties.eventname;
                obj['start'] = results.features[i].properties.datestart;
                obj['end'] = results.features[i].properties.dateend;
                eventlist.push(obj);
            }
        }
        console.log(eventlist);
        return eventlist;
    }


      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: [ 'interaction', 'dayGrid'],
            defaultView: 'dayGridMonth',
            contentHeight: 'auto',
            header: { left: 'prev,next', center: '', right: 'title' },
            events: function(info, successCallback, failureCallback) {   

                successCallback(myevents());

            }
        });

        calendar.render();

      });



    </script>

</html>

Answer 1

如果您记录每个人的创建 obj 并注意日志在控制台中的显示顺序（特别是与它记录整个事件列表时相比），您可能会开始看到问题 - 观察通过这个演示： https://codepen.io/ADyson82/pen/pMEZNE 。还请记住，像 Chrome 这样的浏览器可以追溯地动态填充对象的日志（换句话说，它可以创建日志条目，然后在代码中更新对象时向其中添加数据），这不是在您尝试调试此类问题时总是很有帮助。

我的意思是你没有考虑到你的脚本文件将被加载异步...

幸运的是，由于 fullCalendar 已经为您提供了 successCallback 在您准备好 return 事件时调用，这非常适合处理异步场景。您可以简单地在异步 eq_feedbackCallback 中调用 successCallback。这将确保您不会在事件列表实际填充之前将其发送到 fullCalendar。

function myevents(info, successCallback, failureCallback) {
  var script = document.createElement("script");
  script.src =
    "https://uploads-ssl.webflow.com/5b5a1fce48210813dc66ccb6/5d2f8540e5892f506213cb11_Output.txt";
  document.getElementsByTagName("head")[0].appendChild(script);

  window.eqfeed_callback = function(results) {
    var eventlist = [];
    for (var i = 0; i < results.features.length; i++) {
      var obj = {};
      obj["title"] = results.features[i].properties.eventname;
      obj["start"] = results.features[i].properties.datestart;
      obj["end"] = results.features[i].properties.dateend;
      eventlist.push(obj);
    }
    successCallback(eventlist);
  };
}

document.addEventListener("DOMContentLoaded", function() {
  var calendarEl = document.getElementById("calendar");

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ["interaction", "dayGrid"],
    defaultView: "dayGridMonth",
    contentHeight: "auto",
    header: { left: "prev,next", center: "", right: "title" },
    events: myevents
  });

  calendar.render();
});

演示：https://codepen.io/ADyson82/pen/gVwjzY

使用事件（作为函数）v4 的问题

Issue using events (as a function) v4

javascript

fullcalendar

fullcalendar-4