FullCalendar: фильтрация событий нескольких типов

У меня есть события определенных типов (для этого примера:) "Кошки" или "Собаки", и я могу отфильтровать их по отдельности, используя эту фильтрацию событий jquery fullcalendar.

Но что я не могу понять, так это как отфильтровать события, которые могут быть нескольких типов?

Например, событие - это собака и кошка, а другое - просто кошка и собака. Когда я выбираю "Собаку" с помощью моего селектора, отображается только категория "Только собака". Но я хочу, чтобы категория "Собака и кошка" тоже появлялась, потому что в ней есть категория "Собака".

Вот мой код у меня есть.

<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>
Источник

1 ответ

Решение

Так как вы добавляете "all" в вашем массиве, который вы ищете по индексу значения фильтра, он больше не ищет в вашей строке категории, но выполняет поиск во вновь сформированном массиве. Например, когда вы фильтруете "Dogs" код оценивается для:

["all", "Dog, Cat"].indexOf("Dog") >= 0 который возвращается false,

Один из способов сделать то, что вы хотите, будет выглядеть так:

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

Это означает, что если вы выбрали все, то мы всегда отображаем все события, а в других случаях ищем вхождение "Dog" или "Cat" в строке категории события.

Также вы можете объявить свой $('#type_selector') в качестве переменной и использовать ее, а не получать ее каждый раз; это сделало бы это более эффективным.

Источник
Другие вопросы по тегам