FullCalendar：过滤多种类型的事件答案

【问题标题】：FullCalendar: Filtering Events That Are Multiple TypesFullCalendar：过滤多种类型的事件
【发布时间】：2018-12-24 07:07:57
【问题描述】：

我有某些类型的事件（对于这个例子：）“Cats”或“Dogs”，我可以使用 jquery fullcalendar event filtering 单独过滤它们。

但我想不通的是，如何过滤可以是多种类型的事件？

例如，一个事件是一只狗和一只猫，而另一个事件只是猫和狗。当我用我的选择器选择 Dog 时，只显示只有 Dog 的类别。但我希望 Dog 和 Cat 类别也显示出来，因为其中包含 Dog 类别。

这是我的代码。

<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>

【问题讨论】：

标签： javascript filter fullcalendar qtip2

【解决方案1】：

由于您将"all" 添加到您正在搜索过滤器值索引的数组中，因此它不再在您的类别字符串中搜索，而是在您新形成的数组中搜索。例如，当您过滤 "Dogs" 时，代码被评估为：

["all", "Dog, Cat"].indexOf("Dog") >= 0 返回false。

一种做你想做的事情的方法如下所示：

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

意思是如果你选择了所有，那么我们总是渲染所有的事件，在其他情况下，在事件类别字符串中搜索“狗”或“猫”的出现。

此外，您可能希望将 $('#type_selector') 声明为变量并使用它，而不是每次都获取它；这样会更有效率。

【讨论】：