Как я могу передать фактический массив JavaScript динамически, а не вручную в EventListener?(FullCalendar) - PullRequest
Новая
       15

Как я могу передать фактический массив JavaScript динамически, а не вручную в EventListener?(FullCalendar)

0 голосов
/ 18 апреля 2019

Я прямо взял из документации код раздела событий, показывающий, как у вас будет код события при передаче нескольких источников и нескольких событий. Это выглядит фантастически, за исключением того, что я понятия не имею, как заставить это генерировать динамически. Я получаю запрос из БД с данными в php, передаю в массив javascript и мне нужно напечатать результаты в соответствующих тегах для x количества возвращаемых строк.

Любая моя попытка сделать какое-то время для цикла или функции приводит к тому, что переменная ключевого слова внутри них (например, 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 голосов
/ 21 апреля 2019

Я бы использовал комментарий для этого, но у меня недостаточно репутации, чтобы сделать это.Из того, что я вижу, вы пытаетесь динамически добавлять события после инициализации календаря, но это не может произойти, если вы инициализируете календарь внутри события DOMContentLoaded.Это делает переменную календаря недоступной для вас из-за области, из которой был запущен код.То, что вы должны сделать (это сработало от меня), это напрямую присоединить элемент календаря и сам календарь к их соответствующим переменным, не помещая его в слушатель события DOMContentLoaded.по сути, ваш код теперь будет выглядеть так: 

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

Затем вы можете динамически добавлять события, вызывая calendar.addEvent()

...