fullcalendar动态添加事件
我正在尝试动态地在完整日历中创建事件。
我有：
$('#calendar').fullCalendar({ viewRender: function (view) { var h; if (view.name == "month") { h = NaN; } else { h = 2500; // high enough to avoid scrollbars } $('#calendar').fullCalendar('option', 'contentHeight', h); }, lang: 'fr', events: [ { title: '8 présents', start: data[0] }, { title: '8 excusés', start: data[1] }, { title: '8 excusés', start: '2015-01-08' }, { title: '8 présents', start: '2015-01-08' }, ], dayClick: function (date, jsEvent, view) { window.location.replace(Routing.generate('dateChoisie', {date: date.format()})); } }) 我有一个var数据，这是一个包含事件所有日期的数组。 我想以与插入数据[0]，数据[1]等相同的方式在事件中插入它，但是动态地为所有日期插入。
我试过做一个：
events: [ for (var i = 0, max = data.Lenght; i < max; i++) { { title: '8 présents', start: data[i] }, } { title: '8 excusés', start: data[1] }, { title: '8 excusés', start: '2015-01-08' }, { title: '8 présents', start: '2015-01-08' }, ],
但它在列表中不起作用。
谁知道我怎么做到这一点？
渲染完整日历后，您可以动态添加事件。
var event={id:1 , title: 'New event', start: new Date()}; $('#calendar').fullCalendar( 'renderEvent', event, true);
资料来源： http ： //fullcalendar.io/docs/event_data/addEventSource/
您可以动态添加事件源。 事件源是一个可以返回json数据的URL。
也许在更改事件数据后触发refetch事件可能就足够了。
.fullCalendar( 'refetchEvents' )
资料来源： http ： //fullcalendar.io/docs/event_data/refetchEvents/
我正在寻找一段时间，我发现了一种可能性。
最后这很容易……
我在这里说，也许任何人都有兴趣。
for (var i in data) var monthSource = new Object(); monthSource.title = data[i]+' présents'; monthSource.start = i; // this should be date object monthSource.end = new Date(y, m, d); //to now month[a] = monthSource; a++; } $('#calendar').fullCalendar({ viewRender: function (view) { $('#calendar').fullCalendar( 'removeEvents'); $('#calendar').fullCalendar('addEventSource', month); }
如网站示例所示：
https://fullcalendar.io/docs/renderEvent-demo
因此，添加事件，然后使用您想要添加到后端的任何内容。
或者您可以将事件添加到后端，然后返回数据库的新ID，然后将其添加到时间线，这样您就可以正确使用ID。
或者使用返回消息更新id，无论你的船是什么。
（如果你做了任何复杂的事情，被接受的解决方案将失去事件;添加的事件是短暂的，如果你眨眼太猛烈，它将自发消失。这个解决方案很强大，如果你做更复杂的事情，它将起作用。）
对持久性事件的支持有点不优雅。 您可能必须转储，重新加载和呈现整个日历状态……：
var CAL, EVENTS; $(document).ready(function() { // set up calendar with an EventSource (in this case an array) EVENTS = [...]; $('#calendar').fullCalendar({...}); // calendar object CAL = $('#calendar').fullCalendar('getCalendar'); // extend object (could be its own function, etc.) CAL.refresh = function() { CAL.removeEvents(); CAL.addEventSource(EVENTS); } // finish setting up calendar CAL.refresh(); });
演示：
EVENTS.pop(); // remove last event refresh(); // refresh calendar; last event no longer there
请参阅https://stackoverflow.com/a/18498338