从数组中设置完整日历中的事件答案

【问题标题】：Set events in fullcalendar from array从数组中设置完整日历中的事件
【发布时间】：2014-07-15 09:23:08
【问题描述】：

我正在使用全日历，但我想从数组中设置事件，例如：

var countries = new Array();
countries[0] = {'title':'España', 'start':new Date(y, m, d+4, 19, 0), url:'http://google.com/'};
countries[1] = {'title':'Portugal', 'start':new Date(y, m, 22, 22, 0)};

这是一个静态示例，我将获取此数组，并且在每种情况下我都会有 3 或 9 或...不同的事件。

但例子是：

$('#calendar').fullCalendar({
    editable: false,
    events: [ 
        {
            title: 'example',
            start: new Date(y, m, d+1, 19, 0),
            end: new Date(y, m, d+1, 22, 30),
            allDay: false
        },
        {
            title: 'Click for Google',
            start: new Date(y, m, 28),
            end: new Date(y, m, 29),
            url: 'http://google.com/'
        },         
    ]
});

如何删除这两个示例事件并仅设置我的数组“国家”？

有可能吗？

【问题讨论】：

标签： javascript php arrays fullcalendar dom-events

【解决方案1】：

从日历中删除事件。

$("#calendar").fullCalendar( 'removeEvents' [, idOrFilter ] )

动态添加事件源。

$("#calendar").fullCalendar( 'addEventSource', source )

从这里： https://fullcalendar.io/docs/addEventSource

【讨论】：

你好 kahosk，我已经在使用 addEventSource 但它没有添加到我的日历中，你能帮我举一些你实现的例子吗？我有一个 javascript 对象 {id: '1', resourceId: ' 234001'，开始：'2017-05-07T02:00:00'，结束：'2017-05-07T07:00:00'，标题：'事件 1'}
你能扩展它来举例说明“源”变量中的内容吗？
@jroyce 根据@Kahosk 链接到的页面上的文档，“源可能是一个数组/URL/函数，就像在事件选项中一样”。因此，例如，如果您的事件源中的事件存储在一个数组中，那么您的 source 参数的值将是该数组，如下面的事件所述：fullcalendar.io/docs/v3/events-array

【解决方案2】：

如果您使用的是 fullcalendar v4，Github issue 中提到了一堆 API 更改。

您需要使用新的 API 从日历中获取所有事件对象，并在所有对象上调用 remove 方法。

删除后，您需要使用calendar.addEvent(event) 添加所有事件。

我们不想在添加每个事件后重新渲染完整的日历，所以我们将它包装到一个只导致一次重新渲染的批处理渲染中。

newEvents 是您要添加的事件的数组。

// batch every modification into one re-render
calendar.batchRendering(() => {
    // remove all events
    calendar.getEvents().forEach(event => event.remove());

    // add your new events
    newEvents.forEach(event => calendar.addEvent(event));
});

希望这对某人有所帮助:)

【讨论】：

【解决方案3】：

  calendar.batchRendering(() => {
    // remove all events
    calendar.getEvents().forEach(event => event.remove());
    // add your new events source
    calendar.addEventSource(events);
  });

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。