Javascript FullCalendar：筛选多种类型的事件
我有一些特定类型的事件（例如：）“猫”或“狗”，我可以使用这个函数对它们进行单独的筛选 但我不明白的是，如何过滤可以是多种类型的事件 例如，一个事件是狗和猫，另一个事件只是猫和狗。 当我用选择器选择“狗”时，只会显示“狗”的类别。但我希望狗和猫的分类也出现，因为它有狗的分类 这是我的密码Javascript FullCalendar：筛选多种类型的事件,javascript,filter,fullcalendar,qtip2,Javascript,Filter,Fullcalendar,Qtip2,我有一些特定类型的事件（例如：）“猫”或“狗”，我可以使用这个函数对它们进行单独的筛选 但我不明白的是，如何过滤可以是多种类型的事件 例如，一个事件是狗和猫，另一个事件只是猫和狗。 当我用选择器选择“狗”时，只会显示“狗”的类别。但我希望狗和猫的分类也出现，因为它有狗的分类 这是我的密码 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></sc
<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>
$（文档）.ready（函数（）{
//页面现在已准备就绪，请初始化日历。。
$（“#日历”）.fullCalendar({
displayEventTime:false，
主题系统：“bootstrap4”，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
对：“”
},
可编辑：false，//不允许编辑事件
HandleIndowerSize:正确，
//console.log（（事件））
事件：[{开始：'7/17/2018'，标题：“单一类型”，类别：“狗”}，
{开始日期：'7/19/2018'，标题：“单一类型”，类别：“Cat”}，
{开始：'7/23/2018'，标题：“多种类型”，类别：“猫，狗”}，
{开始：'7/26/2018'，标题：“多种类型”，类别：“狗，猫”}，]/**/
eventRender:函数（事件，元素）{
元素qtip({
内容：event.description+“
”，
风格：{
类：“qtip绿色”，
},
职位：{
角落：{
目标：'中心'，
工具提示：“底部中间”
}
}
});
},
eventRender：函数eventRender（事件、元素、视图）{
return['all'，event.category].indexOf（$（'#type_selector'）.val（））>=0
}
});
$（“#键入_选择器”）。在（'change'，function（）上{
$（“#日历”）.fullCalendar（'rerenderEvents'）；}；
});
}
全部的
狗
猫
“all”“Dogs”[“全部”、“狗，猫”].indexOf（“狗”）>=0false$（'.#type_selector'）.val（）=='all'.| event.category.indexOf（$（'.#type_selector'）.val（））>=0$（“#type_selector”）