Question

所以，基本上我的所有活动（最少360个活动）都有team1 vs. team2或- vs. team2或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

在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”功能下，将其添加到EventManagers导出中，例如：

t.massRenderEvents = massRenderEvents;

现在，对于每批渲染事件，只需调用一次繁重和缓慢的reportEvents。请注意，massRenderEvents -function与原始的renderEvent -function非常相似。

Answer 2

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

只需构建您的活动列表并立即发送所有活动列表：

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

Answer 3

我已经改变了

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

到

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

这对我有用。我已经在几个相关的网站上阅读了这个问题，根据他们的建议，我已经完成了这个。

renderEvent和addEventSource之间的主要区别在于，即使创建了一个因常规回调函数需要花费很多时间的单个事件，第一个尝试与日历交互，第二个发送一个一桶JSON事件到日历，只需要一个回调函数，可以提高性能并减少时间。

Answer 4

我知道这是一个老问题，但我使用此配置选项解决了全日历 v5 中相同的性能问题：
https://fullcalendar.io/docs/rerenderDelay
它基本上会在每个触发渲染事件的操作之后添加一个延迟。如果框架在该延迟内检测到另一个操作，则会在一个操作中呈现这些事件，从而提高性能。

将值设置为 1（因此延迟 1 毫秒）对我有用。我只是将它添加到我的 angular 组件中的配置中：

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

fullcalendar事件呈现性能问题

4 个答案: