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

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

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

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

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

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


javascript fullcalendar fullcalendar-5 fullcalendar-4
person doze    schedule 17.05.2020    source источник
comment
Не было бы способа сделать это без разветвления плагина временной сетки и создания настраиваемого представления, но это непростая задача. Если вы просто хотите сэкономить место, рассматривали ли вы возможность использования представления списка или представления сетки дня?   -  person ADyson    schedule 18.05.2020
comment
да ... это те варианты, о которых я тоже так думал ... очень плохо. Я надеюсь, что это изменится в github.com/fullcalendar/fullcalendar/issues/4698 ... чтобы я мог обновить minTime и maxTime после загрузки событий .. см. codepen.io/acerix/pen/NZGpZE?editors=0011   -  person doze    schedule 18.05.2020
comment
Будем надеяться, что они исправят это в версии 5, по крайней мере, у вас есть открытая проблема. Есть время, потому что он все еще находится в стадии бета-тестирования, и после первоначального выпуска будут обновления. Если у вас есть время, вы могли бы подумать, как внести исправление самостоятельно.   -  person ADyson    schedule 18.05.2020

Ответы (1)


arrow_upward
0
arrow_downward

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

  1. Когда я создаю календари, я использую API календаря Google, чтобы заранее получить события из настроенных источников событий для текущей видимой недели. Затем прокрутите события и узнайте время начала самого раннего события недели и время окончания последнего события недели.
  2. Затем при первоначальном создании календаря я использую параметры minTime и maxTime, чтобы ограничить временную сетку временем начала первого события и временем окончания последнего события.
  3. Затем в событии viewSkeletonRender я нахожу кнопки следующего, назад, сегодня, дня и недели из пользовательского интерфейса и добавляю обработчик событий щелчка к кнопкам.
  4. When next button is clicked for example and timeGridWeek or timeGridDay is in use:
    1. I get the start and end time for the view from calendar.view.activeStart and 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.

person doze    schedule 19.05.2020