从数组中设置fullcalendar的事件

Question

我正在使用fullcalendar，但是我想从数组中设置事件，例如：

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/'
        },         
    ]
});

我该如何删除这两个示例事件并仅使用我的数组“countries”？

这是可能的吗？

- user3396420

Answer 1

从日历中删除事件。

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

动态添加事件源。

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

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

- Kahosk

---

你好kahosk，我已经使用了addEventSource但是它没有添加到我的日历中，请问你能否提供一些你实现的例子来帮助我？我有一个JavaScript对象{id：'1'，resourceId：'234001'，start：'2017-05-07T02:00:00'，end：'2017-05-07T07:00:00'，title：'event 1'}。 - yash

你能否扩展一下，给出“source”变量中可能包含的示例？ - jroyce

根据@Kahosk链接的页面上的文档，“源可以是数组/URL/函数，就像事件选项中一样”。因此，例如，如果您的事件源中的事件存储在数组中，则您的“source”参数的值将是该数组，如此处所述：https://fullcalendar.io/docs/v3/events-array @jroyce - Philip Stratford

Answer 2

如果您正在使用fullcalendar v4，有许多API更改在Github的issue中提到。

您需要使用新的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));
});

希望这能帮到某人 :)

- MKrup

Answer 3

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

- Lasantha Basnayake

---

虽然这段代码可能回答了问题，但提供有关它如何以及/或为什么解决问题的附加上下文将改善答案的长期价值。 - Donald Duck