FullCalendar提高性能，渲染事件

到目前为止，我一直在使用FullCalendar提高性能，渲染事件

.fullCalendar("renderEvent",event,true)

至1 1渲染每一个事件，这增加的50个事件的时候是有点糟糕的表现明智，超过10秒的加载时间。然后，我在这里看到的计算器线程提示使用

.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)，我把事件的IDS这样events[i].id = _id和renderEvents呼叫工作:)在这种情况下，成为任何人

来源

2017-01-03 jones

编辑部分解决方案对于任何感兴趣的人 – jones

使用Fullcalendar“事件有用“方法，它为将事件传递到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 
}

来源

2017-01-03 13:53:26 Karl

有点混乱，因为它不是js和我不太熟悉它。加载时间的主要问题是，当您将事件拖放到日历并使其在下一年重复使用时，它不会在您最初尝试加载页面时发生。 – jones

FullCalendar提高性能，渲染事件

回答

相关问题