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

只需將 id 更改為 class

<div class="calendar loopindex"  ...

進而

$('.calendar').fullCalendar({