\"addEventSource\" 在日历上呈现事件大约需要 5 秒答案

【问题标题】："addEventSource" takes around 5 seconds to render events on calendar\"addEventSource\" 在日历上呈现事件大约需要 5 秒
【发布时间】：2022-10-16 03:38:11
【问题描述】：

我正在使用 angular 12 并使用 Full Calendar 5.8.0

我有一个事件数组（长度为 5000），当我从它们创建事件并尝试使用 .addEventSource(events) 函数在日历上呈现它们时，大约需要 5 秒，有时甚至更多。由于此日历显示空白一段时间。

有没有其他方法可以做到这一点，以便我可以最大限度地减少加载时间？

【问题讨论】：

主要目标是尽可能快地为用户提供交互式页面，因此您可以尝试将事件的初始长度减少到 1000 个甚至更少，然后以某种间隔每秒加载 1000 个，直到所有事件都加载完毕
为什么要尝试一次加载 5000 个事件？没有人可以一次在屏幕上吸收这么多的数据，这将导致糟糕的用户体验。数据涵盖什么时间段？您是否一次在日历上显示整个时间段？如果没有，请尝试仅下载日历显示的时间段（例如 1 个月或 1 周）的数据。然后，如果用户更改日历以显示不同的日期范围，您可以加载更多事件。 Fullcalendar 实际上通过 events-as-json 或 events-as-function 功能内置了对它的支持。
@ADyson 我正在显示 1 个月的日历，该月有 5000 个事件。
好的。是什么背景，为什么在相对较短的时间内发生了这么多事件？为什么要一次向用户显示所有这些内容？他们不能一次吸收或使用那么多信息（没有人可以），而且显示器无论如何都会杂乱无章。而 fullCalendar 根本就不是为了显示如此大量的数据而设计的（因为没有人预料到这样做会有意义）。考虑在您的 UI 中添加某种过滤，以便用户可以选择他们想要查看的事件类别。
@ADyson，即使在进行过滤后，我也得出了这个数字（5000）。在日历上，它只为每个事件显示“点”，在悬停时，它会在工具提示中显示详细信息。日历没有其他问题，它看起来不错并且很容易理解。我面临的唯一问题是在日历上加载事件需要时间。

标签： angular fullcalendar angular13 fullcalendar-5

【解决方案1】：

您可以尝试的事情很少，尽管没有看到您的实际代码，真的很难说什么是最好的解决方案。

您可以使用batchRendering 方法将重新渲染延迟到最后一次操作。
```
    calendar.batchRendering(function() {
      calendar.changeView('dayGridMonth');
      calendar.addEventSource( ... )
    });
```
见https://fullcalendar.io/docs/Calendar-batchRendering
1. 您可以使用rerenderDelay 指定重新渲染之前的毫秒数，以减少出于性能原因的重新渲染次数。
```
    const calendar = new FullCalendar.Calendar(calendar, {
        rerenderDelay: 500
        ...
```
见https://fullcalendar.io/docs/rerenderDelay
1. 您可以将初始视图设置为较短的时间段，例如 dayGridWeek，然后使用默认的 lazyFetching 并通过 ajax 或其他方式加载您的数据，以便它一次只加载您的事件月事件的子集。
见https://fullcalendar.io/docs/lazyFetching
1. 您可以使用loading 方法检查isLoading 值以显示/隐藏加载指示器，以便清楚日历正在工作
见https://fullcalendar.io/docs/loading

【讨论】：