Question

尝试使用events (as a function)从geojson导入数据，但是什么也没显示。缺少针对我的特定案例的v4示例，这使我感到困难，并且缺少错误。我的代码如下。根据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，以便您随时准备返回事件时都可以调用它，这对于处理异步方案是理想的。您可以简单地在异步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

1 个答案: