jquery полный календарь добавить события динамически с помощью цикла

Question

Я пытаюсь использовать полный календарь jQuery, и я должен динамически устанавливать события для результатов, которые я получаю из базы данных, поэтому я использую атрибут данных для установки значений, и после этого я буду отображать его в каландре.вот моя веточка html:

 {%  for i in suivilabo %}
 <div id="calendar" class="loopindex" data-index={{ loop.index }} 
 data-date="{{ i.futuredate|date('Y-m-d') }}</div>
 {%  endfor %}

А вот мой код js:

$(document).ready(function () {


$('#calendar').fullCalendar({
    defaultDate: new Date(),
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: [

$('.loopindex').each(function() {

    {title:'INR laboratoire',start:$('.loopindex').data('date'), allDay: true},
});


    ]
});


}

);

Answer 1

То, что вы делаете сейчас, не имеет никакого смысла, вы предполагаете, что $('.loopindex').each(function() { вернет действительный объект и напечатает / передаст этот объект в массив events, что не является сделкой (и это даже не правильносинтаксис)

Вместо этого вам нужно создать массив перед запуском календаря, например

var dates = [];
$('div[data-date]').each(function() {
    dates.push({title:'INR laboratoire',start: $(this).data('date'), allDay: true});
});

Этот новый массив вы можете затем передать атрибуту event календарянапример,

$('#calendar').fullCalendar({
    defaultDate: new Date(),
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: dates,
});

Answer 2

просто измените идентификатор на класс

<div class="calendar loopindex"  ...

и затем

$('.calendar').fullCalendar({