[英]Filtering FullCalendar events with checkboxes (client-side with javascript)
I have a well working fullcalendar script that adds css-classes to events according to data attributes via eventRender
. 我有一个运行良好的fullcalendar脚本,该脚本通过
eventRender
根据数据属性将css类添加到事件中。 I now need to filter these specific attributes with checkboxes, but I have no idea at all how I should get this going! 现在,我需要使用复选框过滤这些特定的属性,但是我完全不知道该如何进行操作!
My script looks as follows: 我的脚本如下所示:
<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>
The html checkboxes: 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>
Does someone know how I can connect the checkbox-values to calEvent.risk
, ie specific data attributes so as to filter them? 有人知道我如何将checkbox-values连接到
calEvent.risk
(即特定的数据属性)以进行过滤吗? Or does someone have a different idea for multiselect filtering with fullcalendar? 还是有人对使用全日历进行多选过滤有不同的想法? I'd be really grateful for any help!
我将非常感谢您的帮助!
Set a change handler on checkboxes to rerender events. 在复选框上设置更改处理程序以重新呈现事件。 eventRender returning false keeps it from displaying, so make a filter function to get the checked values and return if the event.risk is in those values
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; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.css" rel="stylesheet"/> <div class="checkbox"> <label> <input class='calFilter' type="checkbox" value="normal" checked>Normal</label> </div> <div class="checkbox"> <label> <input class='calFilter' type="checkbox" value="event">Event</label> </div> <div class="checkbox"> <label> <input class='calFilter' type="checkbox" value="whisper">Whisper</label> </div> <div id='calendar'></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.