FullCalendar事件渲染性能问题

Question

基本上，我的所有活动（至少有360个）都有队伍1 vs. 队伍2或- vs. 队伍2或队伍1 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)，我认为这里存在一个bug，因为它会自动进入eventAfterRender或eventRender，再次遍历整个事件集合。

即使'updateEvent'参数应该指示fullCalendar仅更新/渲染特定事件。

是否有人对此有任何建议？

- H3NDRX

---

有可能您正在使用错误的函数。您的需求是什么？能否详细说明一下？ - valar morghulis

Answer 1

全日历现在支持renderEvents方法：https://fullcalendar.io/docs/renderEvents。

只需构建您的事件列表并一次性发送：

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

- Mika56

Answer 2

我知道这是一个旧问题，但我在fullcalendar v5中使用以下配置选项解决了相同的性能问题：
https://fullcalendar.io/docs/rerenderDelay
它基本上在每次触发渲染事件的操作之后添加延迟。如果框架在该延迟内检测到另一个操作，则将这些事件在一个操作中呈现，从而提高性能。 将该值设置为1（即1毫秒延迟）对我有用。 我只需将其添加到我的Angular组件配置中即可。

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

- iamroot

Answer 3

在fullcalendar的源代码中（至少在我的版本中），存在renderEvent处理程序，它调用reportEvents函数，这是性能瓶颈。我通过向源代码添加处理大量渲染事件的功能来解决了这个问题。

我编写了一个简短的函数：

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”函数下，并将其添加到EventManagers的导出中，如下所示：

t.massRenderEvents = massRenderEvents;

现在，对于每个批次的渲染事件，重且慢的 reportEvents 只会被调用一次。请注意，massRenderEvents 函数与原始的 renderEvent 函数非常相似。

- Tohveli

---

我遇到了一个非常类似的问题，最终做的几乎完全一样。感谢您的发布。 - KyleT

Answer 4

我已经改变了

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

到

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

这对我很有效。我已经在几个相关网站上阅读了这个问题，并按照他们的建议做了。

renderEvent和addEventSource之间的主要区别在于，前者在创建单个事件时尝试与日历交互，由于常规回调函数而需要更多时间，而后者将一组JSON事件发送到日历，只需要一个回调函数即可提高性能并节省时间。

- Brijesh Patel