1

任何人都对如何创建一个仅显示有事件的时间的 Fullcalendar TimeGridView 有建议？

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

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

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

有没有办法做我要求的？

4

1 回答 1

0

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

  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 查询了请求范围的事件，则从缓存中返回。

于 2020-05-19T13:08:57.527 回答