FullCalendar улучшить производительность рендеринга событий

Question

До сих пор я использую

.fullCalendar("renderEvent",event,true) 

оказывать каждое событие 1 по 1, и это своего рода плохой производительности мудрый, 10+ секунд время загрузки при добавлении 50 событий. Потом я посмотрел на нить здесь, на 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.

Любой, у кого есть опыт в том, как улучшить скорость рендеринга событий?

Edit:

для .fullCalendar("renderEvents",events,true), я поставил идентификаторы событий, как этот events[i].id = _id и renderEvents вызов работал :) в случае, если это будет полезно для тех, кто

Answer 1

Используйте 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 
}