我有某些类型的事件，(例如:)“猫”或“狗”，我可以使用此 jquery fullcalendar event filtering 单独过滤它们。 .
但是我不明白的是，如何过滤可以是多种类型的事件？
例如，一个事件是一只狗和一只猫，另一个事件是猫和狗。 当我使用选择器选择“狗”时，仅显示“狗”类别。但我希望“狗”和“猫”类别也显示出来，因为其中有“狗”类别。
这是我的代码。
<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>
最佳答案
由于您将 "all" 添加到要搜索过滤器值索引的数组中，因此它不再在类别字符串中搜索，但会在新形成的数组中搜索。例如，当您过滤“Dogs”时，代码将被评估为:
["all", "Dog, Cat"].indexOf("Dog") >= 0 返回 false。
做你想做的事情的一种方法如下所示:
$('#type_selector').val() === '全部' || event.category.indexOf($('#type_selector').val()) >= 0
这意味着，如果您选择了全部，那么我们始终会呈现所有事件，而在其他情况下，则会在事件类别字符串中搜索“Dog”或“Cat”的出现。
此外，您可能希望将 $('#type_selector') 声明为变量并使用它，而不是每次都获取它；这会提高效率。
关于javascript - FullCalendar:过滤多种类型的事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51366837/