使用复选框筛选FullCalendar事件（客户端使用javascript）

我有一个运行良好的fullcalendar脚本，它通过

eventRender

根据数据属性向事件添加css类。我现在需要用复选框过滤这些特定属性，但我完全不知道该如何进行

我的脚本如下所示：

<script>
    $(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'
        });
    });
</script>

$（文档）.ready（函数（）{
$（“#日历”）.fullCalendar({
eventRender:函数（calEvent、元素、视图）{
如果（calEvent.risk==“正常”）{
css（'background-color'，'#99FF99'）；
}
如果（calEvent.risk==“事件”）{
css（'background-color'，'#415eec'）；
}
如果（calEvent.risk==“耳语”）{
css（'background-color'，'#d7cd5'）；
}
},
是的，
displayEventTime:true，
displayEventEnd:true，
可编辑：false，
第一天：1，
周数：对，
可选：false，
周数计算：“ISO”，
eventLimit：对，
事件：“parts/events22.php”
});
});

html复选框：

<div class="checkbox">
  <label><input type="checkbox" value="normal">Normal</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="event">Event</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="whisper">Whisper</label>
</div>

正常的
事件
耳语

有人知道我如何将复选框值连接到

calEvent.risk

，即特定的数据属性，以便对其进行过滤吗？

---

还是有人对fullcalendar的多选过滤有不同的想法？我真的很感激你的帮助

在复选框上设置更改处理程序以重新引发事件。eventRender返回false会阻止其显示，因此，请使用筛选器函数获取选中的值，并在这些值中包含event.risk时返回

$（文档）.ready（函数（）{
$（“#日历”）.fullCalendar({
eventRender:函数（calEvent、元素、视图）{
如果（calEvent.risk==“正常”）{
css（'background-color'，'#99FF99'）；
}
如果（calEvent.risk==“事件”）{
css（'background-color'，'#415eec'）；
}
如果（calEvent.risk==“耳语”）{
css（'background-color'，'#d7cd5'）；
}
返回筛选器（calEvent）；//仅在选中相应复选框时显示
},
是的，
displayEventTime:true，
displayEventEnd:true，
可编辑：false，
第一天：1，
周数：对，
可选：false，
周数计算：“ISO”，
eventLimit：对，
事件：“parts/events22.php”，
活动：[{
开始：力矩（）。添加（1，'天'），
标题:"正常",，
风险：“正常”
}, {
开始：力矩（）。添加（2，'天'），
标题：“事件”，
风险：“事件”
}, {
开始：力矩（）。添加（3，'天'），
标题：“低语”，
风险：“耳语”
}]
});
/*当复选框更改时，重新呈现事件*/
$（'input:checkbox.calFilter'）。在（'change'，function（）上{
$（“#日历”）.fullCalendar（'rerendervents'）；
});
});
功能过滤器（calEvent）{
var VAL=[]；
$（'input:checkbox.calFilter:checked'）。每个（函数（）{
vals.push（$（this.val（））；
});
返回VAL.indexOf（calEvent.risk）！=-1；
}

正常的
事件
耳语