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

直接把id改成class

<div class="calendar loopindex"  ...

然后是

$('.calendar').fullCalendar({

Answer 2

你现在在做什么没有任何意义，你假设 $('.loopindex').each(function() { 将 return 一个有效的对象并且 print/pass 该对象指向数组 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,
});

jquery 完整日历使用循环动态添加事件

jquery full calendar add events dynamically using loop

javascript

jquery

calendar

twig