Javascript fullcalendar 动态添加事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27920314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fullcalendar add events dynamically
提问by anubis
I'm trying to create events in my full calendar dynamically.
我正在尝试在我的完整日历中动态创建事件。
I have:
我有：
$('#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()}));
}
})
I have a var data, which is an array that contains all the dates of the events. I want to insert this in the events in the same way I inserted data[0], data[1], etc, but dynamically for all the dates.
我有一个 var 数据，它是一个包含所有事件日期的数组。我想以与插入 data[0]、data[1] 等相同的方式将其插入到事件中，但对于所有日期都是动态的。
I have tried to do a for:
我试图做一个for：
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'
},
],
But it doesn't work inside the list.
但它在列表中不起作用。
Anybody know how I can do this?
有人知道我该怎么做吗？
回答by Mohammed Safeer
after rendering the full calendar you can add events dynamically.
渲染完整日历后，您可以动态添加事件。
var event={id:1 , title: 'New event', start: new Date()};
$('#calendar').fullCalendar( 'renderEvent', event, true);
回答by anubis
I was searching for a while and I have found an possibility.
我搜索了一段时间，我找到了一种可能性。
It was very easy at the end...
最后还是很轻松的。。。
I let this here, maybe anybody is interested in.
我把这个放在这里，也许有人感兴趣。
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);
}
回答by Marcel Burkhard
Source: http://fullcalendar.io/docs/event_data/addEventSource/
来源：http: //fullcalendar.io/docs/event_data/addEventSource/
You can dynamically add an event source. An Event Source is an url which can for example return json data.
您可以动态添加事件源。事件源是一个 url，例如可以返回 json 数据。
Maybe it might be sufficient for you to fire the refetchevent after you changed the event data.
也许refetch在更改事件数据后触发事件可能就足够了。
.fullCalendar( 'refetchEvents' )
Source: http://fullcalendar.io/docs/event_data/refetchEvents/
回答by ninjagecko
(The accepted solution will lose the event if you do anything complicated; the event added is ephemeral and will spontaneously disappear if you blink too hard. This solution is robust and will work if you do more complicated things.)
（如果你做任何复杂的事情，被接受的解决方案将丢失事件；添加的事件是短暂的，如果你眨得太厉害就会自发消失。这个解决方案是强大的，如果你做更复杂的事情，它会起作用。）
Support for persistent events is a bit inelegant. You may have to dump, reload, AND render the entire calendar state...:
对持久事件的支持有点不优雅。您可能需要转储、重新加载和呈现整个日历状态...：
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();
});
Demo:
演示：
EVENTS.pop(); // remove last event
refresh(); // refresh calendar; last event no longer there
回答by Jannunen
How about doing as it says on the website example:
如何按照网站示例中的说明进行操作：
https://fullcalendar.io/docs/renderEvent-demo
https://fullcalendar.io/docs/renderEvent-demo
So add the event, and then use whatever you want to add that to the backend.
因此，添加事件，然后使用您想要将其添加到后端的任何内容。
Or you can add the event to backend, then return the database's new id and then add it to the timeline, so you'll have the ids right.
或者您可以将事件添加到后端，然后返回数据库的新 id，然后将其添加到时间线，这样您就可以拥有正确的 id。
Or update the id with return message, whatever rocks your boat.
或者用返回消息更新 id，不管你的船如何。
回答by Mehmet Sam?ar
although it is not specified on the fullcalender site, it is necessary to assign a value to the "allday" parameter to be able to add new events dynamically. If you set this value to "false", it will not add the event to the AllDay row. If you do "true" it will add to the AllDay row.
尽管在 fullcalender 站点上未指定它，但必须为“allday”参数分配一个值，以便能够动态添加新事件。如果将此值设置为“false”，则不会将事件添加到 AllDay 行。如果您执行“true”，它将添加到 AllDay 行。
var event = {
title: 'New Event',
start: Date(Date.now()),
backgroundColor: App.getLayoutColorCode('purple'),
allDay: false
}
jQuery('#calendar').fullCalendar('renderEvent',event,true);
or
或者
var originalEventObject = jQuery(this).data('eventObject');
var copiedEventObject = jQuery.extend({}, originalEventObject);
copiedEventObject.title = "New Event";
copiedEventObject.start = date;
copiedEventObject.className = jQuery(this).attr("data-class");
copiedEventObject.backgroundColor = App.getLayoutColorCode('purple');
copiedEventObject.allDay = false;
jQuery('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
