FullCalendar 周/日视图仅显示包含事件的时间段

Question

有人对如何创建仅显示发生事件的时间的 Fullcalendar TimeGridView 有建议吗？

我有一个网站，它显示多个不同的谷歌日历，带有完整的日历和单独的标签。例如，有些日历只有 15:00 - 17:00 的事件，而有些日历的事件只有 11:00 - 21:00。我希望 minTime 和 maxTime 会自动设置为一天/周的第一个事件的开始时间和一天/周的最后一个事件的结束时间。所以根本看不到没有事件的时间段。

我已经这样做了，以便我浏览事件源并找出当前呈现的日/周的事件的第一个和最后一个时间，并在初始化日历时将它们设置为 minTime 和 maxTime 选项。这适用于初始页面渲染，但是当用户更改日期/周时，我需要更新 minTime / maxTime 以使其正确渲染以适应新的周/日选择。否则，初始 minTime / maxTime 将被使用，并且新事件可能会超出这些时间并且在日历上不可见。

我可以在渲染日期或获取事件时使用事件来了解日期何时更改，但我遇到的问题是当我更新 Fullcalendar 中的 minTime / maxTime 选项时，每个事件都会重新获取时间和日期被渲染，所以它会导致无限循环。

有没有办法按照我的要求去做？

Answer 1

我现在实际上是这样做的，虽然不漂亮但很有效..

1. 当我创建日历时，我使用 google calendar api 预先从配置的事件源中获取当前可见周的事件。然后循环遍历事件，找出该周最早事件的开始时间和该周最后一个事件的结束时间。
2. 然后在最初创建日历时，我使用 minTime 和 maxTime 选项将时间网格限制为第一个事件的开始时间和最后一个事件的结束时间。
3. 然后在 viewSkeletonRender 事件中，我从 UI 中找到下一个、后退、今天、日和周视图按钮，并将单击事件处理程序添加到按钮。
4. 例如，当单击下一个按钮并使用 timeGridWeek 或 timeGridDay 时：
   1. 我从 calendar.view.activeStart 和 calendar.view.activeEnd 获取视图的开始和结束时间
   2. 然后从 google calendar api 获取该范围的事件，并找出该周第一个事件和最后一个事件的开始和结束时间
   3. 然后使用 calendar.setOption 设置新的 minTime 和 maxTime
   4. 然后调用calendar.destroy 和calendar.render 让它渲染具有更新的最小和最大时间的新时间网格

这行得通，但是当然在这个解决方案中有很多不必要的对谷歌日历 api 的调用......在初始日历创建中，我首先查询事件，然后 FullCalendar 查询事件..然后当周改变时，我查询下周的事件，FullCalendar 查询下周的事件，更新 min/maxTime 选项，这会导致 FullCalendar 再次重新查询事件几次，我认为，然后我销毁并渲染并再次查询事件FullCalendar 我认为。但是...对于最终用户来说看起来不错：D

如果已经从谷歌日历 api 查询到请求范围的事件，我最好至少实现一些功能来为查询的事件保留缓存并从缓存中返回。