使用復選框過濾FullCalendar事件（客戶端使用javascript）

Question

我有一個運行良好的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>

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>

有人知道我如何將checkbox-values連接到calEvent.risk （即特定的數據屬性）以進行過濾嗎？ 還是有人對使用全日歷進行多選過濾有不同的想法？ 我將非常感謝您的幫助！

Answer 1

在復選框上設置更改處理程序以重新呈現事件。 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>