FullCalendar:如何重新创建/重新初始化FullCalendar或批量添加多个事件

FullCalendar: How to recreate/reinitialize FullCalendar or batch add multiple events

本文关键字：FullCalendar 添加 事件 何重新 创建 初始化      更新时间：2023-09-26

我正在尝试将新事件批量添加到日历中，但找不到一个方便的方法。因此，我决定使用新的事件数组重新初始化视图。所以我尝试了以下方法：

var events = [
    {
        title: 'Event',
        start: new Date(y, m, d, 10),
        description: 'long description',
        id: 1
    },
    {
        title: 'background',
        start: new Date(y, m, d, 11),
        end: new Date(y, m, d, 14),
        description: 'long description',
        id: 0,
        color: "#00FF00",
        textColor: "#000000",
        placeholder: true,
    }];
$('#calendar').fullCalendar({
    events: events
});
$('#calendar').fullCalendar();

我仍然可以看到这些事件，这意味着第二个初始化调用实际上不起作用。这种情况下有什么解决办法吗？

刚刚找到一个漫游。。你可以做

$('#calendar').fullCalendar({
    events: events
});
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar();

摧毁它，然后重新创造。

但是，我仍然不知道如何批量添加事件。

您可以像这样使用addEventSource（）：

.fullCalendar( 'addEventSource', events )

源可以是数组/URL/函数，就像在事件选项中一样。事件将立即从该源获取并放置在日历

var事件=[]；

在我的ajax调用中填充了这些事件。。

.map(JSON.parse(data),
    function(r) {
        events.push({
        id: r.id,
        title: r.title,
        desc: r.desc,
        allDay: true,
        start: moment(r.start).utc(),
        end: moment(r.end).utc()    }); });

然后用它在日历上渲染。。

var myCalendar = $('#calendar').fullCalendar('getCalendar'); 
myCalendar.refresh = function() 
{    myCalendar.removeEvents();    
     myCalendar.addEventSource(events); 
};
    
myCalendar.refresh();
相关文章：