时间戳

首页 > 解决方案 > 如何在 eventListener 中动态而不是手动传递实际的 javascript 数组？（全日历）

javascript - 如何在 eventListener 中动态而不是手动传递实际的 javascript 数组？（全日历）

问题描述

我直接从文档中获取了事件部分代码，显示了如果传递多个源和多个事件，您将如何获得事件代码。这看起来很棒，除了我不知道如何使它动态生成。我从数据库中得到一个带有 php 数据的查询，传递给一个 javascript 数组，并且需要在适当的标签中打印返回的 x 行数的结果。

我的任何尝试做一段时间、for 循环或函数，都会使其中的关键字变量（如 eventSource、event、Title、Start）变得无效且对 javascript 不可读，导致我的日历崩溃。如果它打算采用数组，则必须有一种方法来动态生成此部分？感谢任何提示。在我想“循环”或动态生成的地方添加了注释。

        <html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'dayGrid' ],

// I want to loop from here...
  eventSources: [

    // your event source
    {
      events: [ // put the array in the `events` property
        {
          title  : 'event1',
          start  : '2010-01-01'
        },
        {
          title  : 'event2',
          start  : '2010-01-05',
          end    : '2010-01-07'
        },
        {
          title  : 'event3',
          start  : '2010-01-09T12:30:00',
        }
      ],
      color: 'black',     // an option!
      textColor: 'yellow' // an option!
    }

    // any other event sources...

  ]
// to here. Passing an array I would have gotten from a database query
// with some integer that goes down until rows = 0
        });

        calendar.render();
      });
    </script>
  </head>
  <body>

    <div id='calendar'></div>

  </body>
</html>

标签： javascriptphpfullcalendarfullcalendar-4

解决方案

我会为此发表评论，但我没有足够的声誉来做到这一点。据我所知，您正在尝试在初始化日历后动态添加事件，但如果您在 DOMContentLoaded 事件中初始化日历，则不会发生这种情况。由于运行代码的范围，这样做会使您无法访问日历变量。您应该做的（对我有用）是直接附加日历元素和日历本身各自的变量，而不将其包装在 DOMContentLoaded 事件侦听器中。所以基本上你的代码现在看起来像这样：

<script>
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'dayGrid' ]});
</script>

然后你可以通过调用动态添加事件calendar.addEvent()

推荐阅读