Question

到目前为止，我一直在使用

.fullCalendar("renderEvent",event,true)

将每个事件1逐1渲染，这有点表现不佳，添加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＆＃34;活动＆＃34; method，提供将事件传递给fullcalendar呈现的回调。这种方法非常快，我使用它来为每个视图渲染多达2000个事件。

以下代码段显示了在角度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（），该函数可在回调函数之后或您希望刷新数据时随时使用。并且仅在给定视图上返回所需的日期范围。例如，我只在周视图中按周返回，而不是整个月。

Calendar::refetchEvents

例如，在完成拖放回调事件功能后，您会提到。这样只会更新数据元素，而不会更新DOM中的整个日历。

FullCalendar提高了渲染事件的性能

2 个答案: