Question

我正在尝试动态地在完整日历中创建活动。

我有：

$('#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]等相同的方式在事件中插入它，但是动态地插入所有日期。

我曾尝试过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'
                                },
                            ],

但它在列表中不起作用。

有人知道我该怎么做吗？

Answer 1

渲染完整日历后，您可以动态添加事件。

var event={id:1 , title: 'New event', start:  new Date()};

$('#calendar').fullCalendar( 'renderEvent', event, true);

Answer 2

我正在寻找一段时间，我发现了一种可能性。

最后很容易......

我在这里说，也许任何人都有兴趣。

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);
}

Answer 3

来源：http://fullcalendar.io/docs/event_data/addEventSource/

您可以动态添加事件源。事件源是一个可以返回json数据的URL。

在更改事件数据后触发refetch事件可能就足够了。

.fullCalendar( 'refetchEvents' )

来源：http://fullcalendar.io/docs/event_data/refetchEvents/

Answer 4

（如果你做了任何复杂的事情，被接受的解决方案将失去事件;添加的事件是短暂的，如果你眨眼太猛烈将自发消失。这个解决方案很强大，如果你做更复杂的事情就会有效。）

支持持久性事件有点不优雅。您可能必须转储，重新加载和呈现整个日历状态......：

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

Answer 5

如网站示例所述如何操作：

https://fullcalendar.io/docs/renderEvent-demo

添加事件，然后使用您想要添加到后端的任何内容。

或者您可以将事件添加到后端，然后返回数据库的新ID，然后将其添加到时间线，这样您就可以正确使用ID。

或通过返回消息更新ID，无论您的船摇动了什么。

Answer 6

尽管未在fullcalender站点上指定，但必须为“ allday”参数分配一个值，以便能够动态添加新事件。如果将此值设置为“ false”，则不会将事件添加到AllDay行。如果您选择“ true”，它将添加到“全天”行。

var event = {
        title: 'New Event',
        start: Date(Date.now()),
        backgroundColor: App.getLayoutColorCode('purple'),
        allDay: false
    }
    jQuery('#calendar').fullCalendar('renderEvent',event,true);

或

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);

Answer 7

可以在 example-projects repo 中找到添加事件的简单示例。目前有 angular、vue、react 和 bootstrap 的示例。

想向那些偶然发现此问题的不使用 jquery 的人提及这一点

fullcalendar动态添加事件

7 个答案: