FullCalendar week/dayview, чтобы отображать только временные интервалы с событиями

Question

У кого-нибудь есть предложения о том, как создать Fullcalendar TimeGridView, который будет показывать только время, когда есть события?

У меня есть сайт, который показывает несколько разных календарей Google с полным календарем и на отдельных вкладках. В некоторых календарях есть события только с 15:00 до 17:00, например, а в некоторых - с 11:00 до 21:00. Я бы хотел, чтобы minTime и maxTime автоматически устанавливались на время начала первого события для дня / недели и время окончания последнего события для дня / недели. Так что временные интервалы без событий вообще не будут видны.

Я сделал так, что просматриваю источники событий и узнаю первый и последний раз для событий для текущего дня / недели и устанавливаю для них параметры minTime и maxTime при инициализации календаря. Это нормально работает для начального рендеринга страницы, но когда пользователь меняет дату / неделю, мне нужно будет обновить minTime / maxTime, чтобы он правильно отображался для нового выбора недели / дня. В противном случае будет использоваться начальное minTime / maxTime, и новые события могут выходить за это время и не отображаться в календаре.

Я могу использовать события, когда отображается день или события были получены, чтобы узнать, когда дата изменяется, но у меня проблема в том, что когда я обновляю параметры minTime / maxTime в Fullcalendar, события будут обновляться каждый раз и даты отображаются так, что это вызовет бесконечный цикл.

Есть ли способ сделать то, о чем я прошу?

Answer 1

У меня сейчас получилось вот так, некрасиво, но работает..

1. Когда я создаю календари, я использую API календаря Google, чтобы заранее получить события из настроенных источников событий для текущей видимой недели. Затем прокрутите события и узнайте время начала самого раннего события недели и время окончания последнего события недели.
2. Затем при первоначальном создании календаря я использую параметры minTime и maxTime, чтобы ограничить временную сетку временем начала первого события и временем окончания последнего события.
3. Затем в событии viewSkeletonRender я нахожу кнопки следующего, назад, сегодня, дня и недели из пользовательского интерфейса и добавляю обработчик событий щелчка к кнопкам.
4. Когда, например, нажата следующая кнопка и используется timeGridWeek или timeGridDay:
   1. Я получаю время начала и окончания представления из calendar.view.activeStart и calendar.view.activeEnd
   2. Затем получите из API календаря Google события для этого диапазона и узнайте время начала и окончания первого и последнего события на этой неделе.
   3. Затем используйте calendar.setOption, чтобы установить новые minTime и maxTime
   4. Затем вызовите calendar.destroy и calendar.render, чтобы отобразить новую сетку времени с обновленными минимальным и максимальным временем.

Это работает, но, конечно, в этом решении довольно много ненужных вызовов API календаря Google... при первоначальном создании календаря я сначала запрашиваю события, затем FullCalendar запрашивает события... затем, когда неделя изменяется, я запрашиваю события на следующую неделю, FullCalendar запрашивает события на следующую неделю, обновляет параметры min/maxTime, что заставляет FullCalendar повторно запрашивать события пару раз, я думаю, затем я уничтожаю и визуализирую, и события снова запрашиваются FullCalendar, я думаю. Но... это выглядит нормально для конечного пользователя:D

Было бы лучше для меня хотя бы реализовать некоторую функцию для хранения кеша для запрошенных событий и возврата из кеша, если событие для запрошенного диапазона уже было запрошено из api календаря Google.