全日历动态添加事件

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/

您可以动态添加事件源。事件源是一个 url，例如可以返回 json 数据。

也许在更改事件数据后触发 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 站点上指定，但有必要为"全天"参数分配一个值才能动态添加新事件。如果将此值设置为"false"，则不会将事件添加到"全天"行。如果您执行"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

添加事件的简单示例可以在示例项目存储库中找到。目前有 angular、vue、react 和 bootstrap 的例子。

想为任何不使用jquery的人提到这一点，他们偶然发现了这个