有没有办法根据className FullCalendar切换事件可见性?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (247)

想知道是否有使用完整日历显示隐藏基于该事件的className的元素的方法。

我有一个复选框(让我们说#daytimeEvent),想切换事件htat类白天在数组中的可见性

这是我现在的代码:

$('#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)
      });
   }
}
提问于
用户回答回答于

做到这一点的好方法是在日历的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');
});

不能在demade上隐藏和显示事件,但可以放弃,这是非常灵活和快速的。

用户回答回答于

如果不介意在DOM中创建事件,可以使用CSS和jQuery隐藏显示它们。

通过classNameEvent对象属性分组事件:

var events = [
    {
        'title' : 'Event 1',
        'className' : 'group-1'
    },
    {
        'title' : 'Event 2',
        'className' : 'group-1'
    }
];

然后,可以使用该类切换可见性:

$('.group-1').toggle();

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励