fullcalendar 事件渲染性能問題

Question

所以，基本上我所有的事件（至少有 360 個）都有team1 vs. team2或- vs. team2 team1 vs. -或team1 vs. -占位符。 並且在初始渲染事件中，根據事件是有一個團隊還是兩個團隊來更改顏色。 一隊為橙色，兩隊為綠色。 此外，該事件會在單擊時更改顏色。

但大多數情況下，我對通過渲染事件提高性能感興趣。

fullCalendar 中的渲染性能非常糟糕，我找不到任何解決此問題的方法。

所以這是我的代碼：

eventRender: function (event, element) {
                $(element).append((event.teams[0] != null ? event.teams[0] : '-') + '</br> vs. </br>' + (event.teams[1] != null ? event.teams[1] : '-'));
                if (event.teams.length === 1) {
                    $(element).css('background', 'orange');
                }
                else if (event.teams.length > 1) {
                    $(element).css('background', 'green');
                }
            }  

我的主要問題是，當我單擊事件更改其顏色時，腳本會自動轉到eventRender或eventAfterRender事件，其行為與for語句完全相同 - 它遍歷事件，然后執行我想要的操作處理單個事件，但僅當循環落在單擊事件上時。

另外，在eventClick我調用了$('#myCalendar').fullcalendar('updateEvent',event)並且我認為存在一個錯誤，因為它會自動轉到eventAfterRender或eventRender ，遍歷整個事件集合再次。

即使是嚴格的'updateEvent'參數也應該指示 fullCalendar 只更新/呈現特定事件。

有沒有人對這個問題有任何建議？

Answer 1

Fullcalendar 現在支持renderEvents方法： https : renderEvents 。

只需構建您的事件列表並立即發送它們：

$("#calendar").fullCalendar('renderEvents', events, true);

Answer 2

在 fullcalendars 源代碼中（至少在我的版本中）有 renderEvent-handler，它調用 reportEvents -function，這是性能的瓶頸。 我通過在源代碼中添加對大規模渲染事件的處理來解決這個問題。

我寫了一個簡短的函數：

function massRenderEvents(events, stick) {
    var i;

    for (i = 0; i < events.length; i += 1) {
        normalizeEvent(events[i]);
        if (!events[i].source) {
            if (stick) {
                stickySource.events.push(events[i]);
                events[i].source = stickySource;
            }
            cache.push(events[i]);
        }
    }

    reportEvents(cache);
}

在“EventManager”-function 下，將其添加到 EventManagers 導出中，例如：

t.massRenderEvents = massRenderEvents;

現在，對於每批呈現的事件，沉重和緩慢的 reportEvents 只調用一次。 請注意， massRenderEvents 函數與原始的 renderEvent 函數非常相似。

Answer 3

我知道這是一個老問題，但我使用此配置選項在 fullcalendar 的 v5 中解決了相同的性能問題：
https://fullcalendar.io/docs/rerenderDelay
它基本上會在每個觸發渲染事件的操作之后添加一個延遲。 如果框架在該延遲內檢測到另一個操作，它會在一個操作中呈現這些事件，從而提高性能。

將值設置為 1（所以 1 毫秒延遲）對我有用。 我只是將它添加到我的 angular 組件中的配置中：

  calendarOptions: CalendarOptions = {
    ...,
    rerenderDelay: 1,
  }

Answer 4

我變了

$("#calendar").fullCalendar('renderEvent', eventData1, true);

到

$("#calendar").fullCalendar('addEventSource', eventData1, true);

這對我有用。 我已在幾個相關網站上閱讀了該問題，並根據他們的建議完成了此操作。

renderEvent和addEventSource之間的主要區別在於，第一個嘗試與日歷交互，即使創建單個事件，由於常規回調函數需要很長時間，第二個將一桶 JSON 事件發送到日歷，只需要一個回調功能，提高性能並花費更少的時間。