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 事件发送到日历，只需要一个回调功能，提高性能并花费更少的时间。