FullCalendar 提高渲染事件的性能

Question

到目前为止我一直在使用

.fullCalendar("renderEvent",event,true) 

逐一渲染每个事件，这在性能方面有点糟糕，添加 50 个事件时加载时间超过 10 秒。 然后我在stackoverflow上查看了一个线程，建议使用

.fullCalendar("addEventSource", events) // events is an array of events to be added. 

这大大提高了性能，但我想知道是否可以进一步改进？ 我查看了 FullCalendar 文档并找到了这个函数 renderEvents ( https://fullcalendar.io/docs/event_rendering/renderEvents/ )，但对我来说它不会在日历上呈现事件。 它是在最新的 3.1 版中添加的，所以也许它仍然存在问题？ 从理论上讲，它的性能应该更好，因为它需要一组事件，而不必为每个事件调用 renderEvent。

我还优化了代码，所以我只对数据库进行了 1 次 ajax 调用，所有事件都编码为单个 json 字符串。

任何对如何提高渲染事件速度有经验的人？

编辑：

对于.fullCalendar("renderEvents",events,true) ，我把事件的 ID 像这样events[i].id = _id和renderEvents调用工作:) 以防这对任何人有用

Answer 1

使用 Fullcalendar "events" 方法，该方法提供将事件传递给 fullcalendar 渲染的回调。 这种方法非常快，我使用它为每个视图渲染多达 2000 个事件。

以下代码段显示了在 angular 2 环境中执行此操作的相关代码。 但是概念可以很容易地适应纯 javascript。

var calendarDiv: any;
var self = this;

calendarDiv = $(this.elementRef.nativeElement).find('#calendar');
calendarDiv.fullCalendar({
        defaultView:    "agendaWeek",
        ...
        events: function (start: any, end:any, timezone:any, callback:any) {
            calendarDiv.fullCalendar('removeEvents');
            self.reloadCalendarObjects(start, end, timezone, callback);
        },
        ...
      });

 // Fetch data from remote source (AJAX)
 reloadCalendarObjects(start, end , timezone, fcCallback)  {
    // Do your Axax here
    this.dataService.getRecords('MT_CalObjects')
        .subscribe((data: any[]) => {
           self.fillCalendar(data, fcCallback);
     });
   }

 // Evaluate fetched objects, create fullcalendar events and pass them to FullCalendar Callback)
 fillCalendar(data, fcCallBack) {
    this.fcevents = [];
    for (let entry of data) {
                     this.fcevents.push({
                title: data.eventame,
                start:  data.calstartDate,
                end:    data.calendDate,
                object_id: data.id,
            });
    }
    fcCallBack(this.fcEvents);  // pass back to FullCalendar
 }

Answer 2

我在 FullCalendar 中发现的最大区别是 JSON 源有效负载数据集大小。 确保 JSON 是传递快速数据库调用，支持在服务器配置中使用压缩 gzip/inflating 并且只返回将要使用的数据。 如果不使用字段，许多人会返回整个选择数据集。

用于连续调用以获取数据。 我相信您正在寻找 refetchEvents() ，它可以在回调函数之后或在您希望刷新数据时随时使用。 并且只返回给定视图所需的日期范围。 例如，我只在周视图中逐周返回，而不是整个月。

日历::refetchEvents

所以举个例子，在完成你提到的拖放回调事件函数之后。 这只会更新数据元素，而不是 DOM 中的整个日历。