- javascript/
- Javascript FullCalendar week/dayview仅显示包含事件的时间段
Javascript FullCalendar week/dayview仅显示包含事件的时间段
Javascript FullCalendar week/dayview仅显示包含事件的时间段,javascript,fullcalendar,fullcalendar-4,fullcalendar-5,Javascript,Fullcalendar,Fullcalendar 4,Fullcalendar 5,有人对如何创建只显示有事件发生的时间的Fullcalendar TimeGridView有什么建议吗
我有一个网站,显示多个不同的谷歌日历与完整的日历和在单独的标签。例如,有些日历只有15:00-17:00的事件,有些日历只有11:00-21:00的事件。我希望minTime和maxTime将自动设置为天/周第一个事件的开始时间和天/周最后一个事件的结束时间。因此,没有事件的时段将根本不可见
我这样做是为了在初始化日历时浏览eventsources,找出当前渲染日/周事件的第一次和最后一次,并将
有人对如何创建只显示有事件发生的时间的Fullcalendar TimeGridView有什么建议吗
我有一个网站,显示多个不同的谷歌日历与完整的日历和在单独的标签。例如,有些日历只有15:00-17:00的事件,有些日历只有11:00-21:00的事件。我希望minTime和maxTime将自动设置为天/周第一个事件的开始时间和天/周最后一个事件的结束时间。因此,没有事件的时段将根本不可见
我这样做是为了在初始化日历时浏览eventsources,找出当前渲染日/周事件的第一次和最后一次,并将它们设置为minTime和maxTime选项。对于初始页面渲染,这可以正常工作,但当用户更改日期/周时,我需要更新minTime/maxTime,以便为新的周/日选择正确渲染。否则,将使用初始的minTime/maxTime,并且新事件可能超出这些时间,并且在日历上不可见
我可以在呈现日期或获取事件时使用事件来了解日期的更改时间,但我遇到的问题是,当我更新Fullcalendar中的minTime/maxTime选项时,每次呈现日期时都会重新提取事件,因此会导致无限循环
有什么方法可以满足我的要求吗?我现在确实是这样做的,虽然不漂亮,但很有效
当我创建日历时,我使用google calendar api预先从当前可见周的已配置事件源获取事件。然后循环事件,找出本周最早事件的开始时间和本周最后一个事件的结束时间
然后,在最初创建日历时,我使用minTime和maxTime选项将时间网格限制为第一个事件的开始时间和最后一个事件的结束时间
然后在viewSkeletonRender事件中,我从UI中找到“下一个”、“上一个”、“今天”、“日”和“周”视图按钮,并将单击事件处理程序添加到这些按钮
例如,单击“下一步”按钮并使用timeGridWeek或timeGridDay时:
我从calendar.view.activeStart和calendar.view.activeEnd中获取视图的开始和结束时间
然后从谷歌日历api获取该范围内的事件,并找出该周第一次和最后一次事件的开始和结束时间
然后使用calendar.setOption设置新的minTime和maxTime
然后调用calendar.destroy和calendar.render,使其使用更新的最小和最大时间渲染新的时间网格
这是可行的,但是当然在这个解决方案中有很多不必要的对google日历api的调用。。。在初始日历创建中,我首先查询事件,然后FullCalendar查询事件。。然后,当周发生变化时,我查询下周的事件,FullCalendar查询下周的事件,更新min/maxTime选项,这会导致FullCalendar重新查询事件几次,然后我销毁并呈现事件,FullCalendar再次查询事件。但是对于最终用户:D,它看起来还可以
如果已经从google calendar api查询了请求范围内的事件,那么我最好至少实现一些函数来为查询的事件保留缓存,并从缓存中返回。我现在实际上是这样做的,虽然不漂亮,但很有效
当我创建日历时,我使用google calendar api预先从当前可见周的已配置事件源获取事件。然后循环事件,找出本周最早事件的开始时间和本周最后一个事件的结束时间
然后,在最初创建日历时,我使用minTime和maxTime选项将时间网格限制为第一个事件的开始时间和最后一个事件的结束时间
然后在viewSkeletonRender事件中,我从UI中找到“下一个”、“上一个”、“今天”、“日”和“周”视图按钮,并将单击事件处理程序添加到这些按钮
例如,单击“下一步”按钮并使用timeGridWeek或timeGridDay时:
我从calendar.view.activeStart和calendar.view.activeEnd中获取视图的开始和结束时间
然后从谷歌日历api获取该范围内的事件,并找出该周第一次和最后一次事件的开始和结束时间
然后使用calendar.setOption设置新的minTime和maxTime
然后调用calendar.destroy和calendar.render,使其使用更新的最小和最大时间渲染新的时间网格
这是可行的,但是当然在这个解决方案中有很多不必要的对google日历api的调用。。。在初始日历创建中,我首先查询事件,然后FullCalendar查询事件。。然后,当周发生变化时,我查询下周的事件,FullCalendar查询下周的事件,更新min/maxTime选项,这会导致FullCalendar重新查询事件几次,然后我销毁并呈现事件,FullCalendar再次查询事件。但是对于最终用户:D,它看起来还可以
如果已经从google calendar api查询了请求范围的事件,那么我最好至少实现一些功能来保留对查询事件的缓存,并从缓存中返回。如果不使用timegrid插件并进行修改,就无法做到这一点,但这不是一项轻率的任务。如果您只是想节省空间,是否考虑过使用列表视图或daygrid视图?是的。。这些都是我目前所认为的选择。。太糟糕了。我希望这会在v5中改变。。。所以我可以在事件加载后更新minTime和maxTime。。看,让我们希望他们在v5中修复它,至少你有一个关于它的开放问题。还有时间,因为它仍处于测试阶段,而且还会有u