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

我有一個良好的工作fullcalendar腳本，通過eventRender根據數據屬性向事件添加css-classes。我現在需要用複選框來過濾這些特定的屬性，但是我根本不知道我應該怎麼做到這一點！使用複選框過濾FullCalendar事件（客戶端使用javascript）

我的腳本如下所示：

<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>

是否有人知道我怎麼能複選框值連接到calEvent.risk，即特定的數據屬性以過濾他們？還是有人對fullcalendar進行多選過濾有不同的想法？我會很感激任何幫助！

來源

2016-04-25 sardine

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

來源

2016-04-25 21:34:09 smcd

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

回答

相關問題