如何在EventListener中动态而不是手动传递实际的javascript数组? (全日历)

时间:2019-04-18 03:37:54

标签: javascript php fullcalendar fullcalendar-4

我直接从文档中获取了事件部分代码,该代码显示了如果传递多个源和多个事件,您将如何获得事件代码。这看起来很棒,但我不知道如何使它动态生成。我从数据库获取了一个包含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>

1 个答案:

答案 0 :(得分:0)

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

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

然后,您可以通过调用calendar.addEvent()

动态添加事件