FullCalendar: Filtering Events That Are Multiple Types

I have events that are certain types,(for this example:) "Cats" or "Dogs", and I can filter them individually just fine, using this jquery fullcalendar event filtering .

But what I can't figure out is, how can I filter events that can be multiple types?

For example, an event is a Dog AND a Cat and another event is just Cat and Dog. When I select Dog with my selector, only the category that is just Dog shows up. But I want the category that is Dog and Cat to show up also, because it has Dog category in it.

Here is my code I have.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href = "https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
</head>





  <script>
   $(document).ready(function() {
// page is now ready, initialize the calendar..
  $('#calendar').fullCalendar({
  displayEventTime: false,
  themeSystem: 'bootstrap4',
    header: {
            left: 'prev,next today',
            center: 'title',
            right: ''
          },
          editable: false, // Don't allow editing of events
          handleWindowResize: true,

          //console.log((events))

         events : [{start: '7/17/2018',title:"Single Type", category:"Dog"},
         {start: '7/19/2018',title:"Single Type", category:"Cat"},
         {start: '7/23/2018',title:"Multiple Types", category:"Cat, Dog"},
         {start: '7/26/2018',title:"Multiple Type", category:"Dog, Cat"},],          /**/

   eventRender: function(event, element) {
            element.qtip({
                content: event.description + '<br />',
                style: {
                   classes: 'qtip-green',
                },
                position: {
                    corner: {
                        target: 'center',
                        tooltip: 'bottomMiddle'
                    }
                }
                });
             },
            eventRender: function eventRender(event, element, view) {
                return ['all', event.category].indexOf($('#type_selector').val()) >= 0

            }

  });
  $('#type_selector').on('change',function(){
  $('#calendar').fullCalendar('rerenderEvents');});
});

}
</script>
<select id="type_selector">
  <option value="all">All</option>
  <option value="Dog">Dog </option>
  <option value="Cat">Cat</option>
</select>




<div id='calendar'></div>

Solution

Since you add "all" to your array that you are searching for index of filter value it no longer searches in your category string, but it does search in your newly formed array. For example when you filter "Dogs" the code is evaluated to:

["all", "Dog, Cat"].indexOf("Dog") >= 0 which returns false.

One way of doing what you want would look like this:

$('#type_selector').val() === 'all' || event.category.indexOf($('#type_selector').val()) >= 0

Meaning if you selected all, then we always render all events, and in other cases search of "Dog" or "Cat" occurance in event category string.

Also you might want to declare your $('#type_selector') as a variable and use that rather than getting it everytime; that would make it more efficient.