チェックボックス付きのFullCalendarイベントをフィルタリングする（クライアント側ではjavascriptを使用）

Question

データ属性に応じてイベントにCSSクラスを追加する完全なフルカラースクリプトがeventRenderで作成されています。私は今これらの特定の属性をチェックボックスでフィルタリングする必要がありますが、私はこれをどのようにするべきか全く考えていません！

次のように私のスクリプトが見えます：

<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でマルチセレクションフィルタリングの考え方を変えていますか？私は本当に助けてくれてありがとう！

Answer 1

イベントを再レンダリングするチェックボックスにチェンジハンドラを設定します。 falseを返すeventRenderが表示さからそれを維持し、そう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>

である場合にチェック値を取得して返すようにフィルタ機能を作ります