是否有一种方法可以切换基于className FullCalendar的事件可见性
是否有一种方法可以切换基于className FullCalendar的事件可见性
提问于 2016-10-26 22:51:16
我想知道是否有一种方法可以使用完整日历来显示/隐藏基于该事件的className的元素。
确切的情况是我有一个复选框(比方说#daytimeEvent)，我想切换数组中的事件htat有类daytime的可见性...
到目前为止，我试过了，但它似乎完全从日历中删除了事件，之后无法找回它们……
下面是我当前的代码：
$('#daytimeEvent').on('change', function(){
if ($(this).is(':checked'))
{
// That part doesn't work
calendar.fullCalendar('renderEvent');
}
else
{
// This seems to destroy the event without having the opportunity to toggle the visibility back after
calendar.fullCalendar('removeEvents', function(event){
return $.inArray('daytime', event.className)
});
}
}我在谷歌上搜索过，似乎我不是唯一一个有这个问题的人，但我找不到任何解决方案。
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-10-27 23:54:31
我找到了一个解决方案(感谢@smcd作为参考)。实现这一点的好方法是在日历的eventRender方法中。我把我的逻辑放在那里，然后这样做：
$('#myCalendar').fullCalendar({
// your init [...] then
eventRender: function(event, element) {
// Array that will store accepted classes
var eventAcceptedClasses = [];
if ($('.daytime-events-checkbox').is(':checked')){
eventAcceptedClasses.push('daytime-events');
}
if ($('.nighttime-events-checkbox').is(':checked')){
eventAcceptedClasses.push('nighttime-events');
}
displayEvent = false;
event.className.forEach(function(element){
if ($.inArray(element, eventAcceptedClasses) != -1){
displayEvent = true;
}
});
return displayEvent;
}
});然后，只需在事件侦听器中使用rerenderEvents方法，如下所示。
$('.events-filter-checkbox').on('change', function(){
calendar.fullCalendar('rerenderEvents');
});你不能在demande上隐藏和显示事件，但你可以重新渲染它是相当灵活和快速的。
Stack Overflow用户
发布于 2016-10-26 22:59:33
你有一个错误，那就是你如何检查类的存在：
$.inArray('.daytime', event.className)className中没有字符串.daytime，您应该改为检查daytime (没有.)：
$.inArray('daytime', event.className)Stack Overflow用户
发布于 2020-09-06 17:28:51
我认为公认的答案有点老了，所以解决这个问题的新方法是使用batchRendering
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40265496
复制相关文章
相似问题