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. I now need to filter these specific attributes with checkbox

Solution 1:

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

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

    functionfilter(calEvent) {
      var vals = [];
      $('input:checkbox.calFilter:checked').each(function() {
        vals.push($(this).val());
      });
      return vals.indexOf(calEvent.risk) !== -1;
    }

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.css"rel="stylesheet"/><divclass="checkbox"><label><inputclass='calFilter'type="checkbox"value="normal"checked>Normal</label></div><divclass="checkbox"><label><inputclass='calFilter'type="checkbox"value="event">Event</label></div><divclass="checkbox"><label><inputclass='calFilter'type="checkbox"value="whisper">Whisper</label></div><divid='calendar'></div>