FullCalendar：筛选多种类型的事件

Question

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 . 我有某些类型的事件（对于此示例：）“ Cats”或“ Dogs”，并且可以使用此jquery fullcalendar事件过滤单独过滤它们。

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>

Answer 1

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. 由于将"all"添加到要搜索过滤器值索引的数组中，因此不再在类别字符串中搜索，而是在新形成的数组中搜索。 For example when you filter "Dogs" the code is evaluated to: 例如，当您过滤"Dogs" ，代码将评估为：

["all", "Dog, Cat"].indexOf("Dog") >= 0 which returns false . ["all", "Dog, Cat"].indexOf("Dog") >= 0 ，返回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; 另外，您可能想将$('#type_selector')为变量，并使用它而不是每次都获取它； that would make it more efficient. 这样可以提高效率。

FullCalendar：筛选多种类型的事件

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-07-16 19:00:54

FullCalendar：筛选多种类型的事件

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-07-16 19:00:54

解决方案1
1 已采纳 2018-07-16 19:00:54