使用复选框过滤FullCalendar事件(使用javascript进行客户端)

我有一个运行良好的fullcalendar脚本,它通过eventRender根据数据属性向事件添加css类。 我现在需要使用复选框过滤这些特定属性,但我根本不知道如何实现这一目标!

我的脚本如下所示:

  $(document).ready(function() { $('#calendar').fullCalendar({ eventRender: function(calEvent, element, view) { if (calEvent.risk == "normal") { element.css('background-color', '#99FF99'); } if (calEvent.risk == "event") { element.css('background-color', '#415eec'); } if (calEvent.risk == "whisper") { element.css('background-color', '#D7CDD5'); } }, allDaySlot: true, displayEventTime: true, displayEventEnd: true, editable: false, firstDay: 1, weekNumbers: true, selectable: false, weekNumberCalculation: "ISO", eventLimit: true, events: 'parts/events22.php' }); });  

html复选框:

 

有人知道如何将checkbox-values连接到calEvent.risk ,即特定的数据属性以便过滤它们吗? 或者有人对使用fullcalendar进行多选过滤有不同的想法吗? 我真的很感激任何帮助!

在复选框上设置更改处理程序以重新呈现事件。 eventRender返回false使其无法显示,因此创建一个过滤函数来获取已检查的值,如果event.risk在这些值中则返回

  $(document).ready(function() { $('#calendar').fullCalendar({ eventRender: function(calEvent, element, view) { if (calEvent.risk == "normal") { element.css('background-color', '#99FF99'); } if (calEvent.risk == "event") { element.css('background-color', '#415eec'); } if (calEvent.risk == "whisper") { element.css('background-color', '#D7CDD5'); } return filter(calEvent); // Only show if appropriate checkbox is checked }, allDaySlot: true, displayEventTime: true, displayEventEnd: true, editable: false, firstDay: 1, weekNumbers: true, selectable: false, weekNumberCalculation: "ISO", eventLimit: true, events: 'parts/events22.php', events: [{ start: moment().add(1, 'day'), title: 'Normal', risk: 'normal' }, { start: moment().add(2, 'day'), title: 'Event', risk: 'event' }, { start: moment().add(3, 'day'), title: 'Whisper', risk: 'whisper' }] }); /* When a checkbox changes, re-render events */ $('input:checkbox.calFilter').on('change', function() { $('#calendar').fullCalendar('rerenderEvents'); }); }); function filter(calEvent) { var vals = []; $('input:checkbox.calFilter:checked').each(function() { vals.push($(this).val()); }); return vals.indexOf(calEvent.risk) !== -1; }