如何在 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>

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

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

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

相关内容

最新更新

热门标签：