我正在尝试将 FullCalendar 4.0.0-beta.2 集成到我的项目中，我需要的按钮之一是根据某个事件参数（在本例中为“名称”）过滤结果。我有“仅限我的事件”按钮的功能，它将isShowAll正确设置布尔值。我遇到的问题是让函数myEventFunc调用函数eventRender。使用calendar.rerenderEvents();似乎也不起作用。
我对 JavaScript 比较陌生，所以如果有一个简单的解决方案，我会更喜欢它。如果对于我基于给定名称过滤结果的整个目标有另一个（更好的）解决方案，请解释清楚！谢谢 ：）
日历.html：
<head>
<meta charset='utf-8' />
<!-- Modal display files-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/modalstyle.css">
<!-- FullCalendar packages -->
<link href='../packages/core/main.css' rel='stylesheet' />
<link href='../packages/daygrid/main.css' rel='stylesheet' />
<link href='../packages/timegrid/main.css' rel='stylesheet' />
<link href='../packages/list/main.css' rel='stylesheet' />
<script src='../vendor/rrule.js'></script>
<script src='../packages/core/main.js'></script>
<script src='../packages/interaction/main.js'></script>
<script src='../packages/daygrid/main.js'></script>
<script src='../packages/timegrid/main.js'></script>
<script src='../packages/list/main.js'></script>
<script src='../packages/rrule/main.js'></script>
<script src="js/jquery-3.3.1.js"></script>
<script>
var isShowAll = true;
var thisOwner = "Pranay Agrawal";
document.addEventListener('DOMContentLoaded', function() {
// TODO turn PHP variable into javascript?
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid', 'list', 'rrule'],
/*The bar on the top of the calendar for navigation*/
header: {
/*left: 'prev,next today',*/
left: 'today',
center: 'title',
right: 'timeGridOneWeek,timeGridDay,listWeek',
},
/*Custom views*/
views: {
timeGridOneWeek: {
type: 'timeGrid',
duration: {
days: 7
},
buttonText: 'week'
},
listWeek: {
duration: {
days: 7
}
}
},
slotLabelInterval: {hours: 1}, //slots labeled by one hour
selectOverlap: false, //user not allowed to "select" periods of times that are occupied by events
defaultView: 'timeGridOneWeek', //start on week view
slotDuration: '00:15:00', //each hour is split into 15 minutes
minTime: "06:00:00", //start day 6am
maxTime: '23:00:00', //end day 11pm
scrollTime: '11:30:00', //start view at 11:30am?
allDaySlot: false, //cannot make allday events
nowIndicator: true, //red bar that shows current time
navLinks: true, // can click day/week names to navigate views
weekNumbersWithinDays: true, //styling week numbers in dayGrid view
eventLimit: true, // allow "more" link when too many events
events: [{
title: 'All Day Event',
start: '2019-02-01'
},
{
title: 'Long Event',
start: '2019-02-07',
end: '2019-02-10'
},
{
groupId: 999,
id: 2,
title: 'Repeating Event',
start: '2019-02-09T16:00:00'
},
{
groupId: 999,
id: 2,
title: 'Repeating Event',
start: '2019-02-16T16:00:00'
},
{
title: 'Conference',
id: 2,
start: '2019-02-11',
end: '2019-02-13'
},
{
title: 'Dunkin\' Donuts',
start: '2019-03-17T10:30:00',
end: '2019-03-17T11:15:00',
color: '#800080'
},
{
title: 'AppleBee\'s',
start: '2019-03-22T15:00:00',
end: '2019-03-22T16:30:00',
location: 'The Arena',
color: '#ff0000',
description: 'Big Event',
owner: 'Pranay Agrawal'
},
{
title: 'Mellow Mushroom',
start: '2019-03-19T13:30:00',
color: '#cc3300'
},
{
title: 'India Oven',
start: '2019-03-20T16:30:00',
color: '#cc9900'
},
{
title: 'Thai Thai',
start: '2019-03-21T12:00:00',
color: '#669900'
},
{
title: 'Birthday Party',
start: '2019-02-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2019-02-24T12:05:00'
},
{
title: 'Free Pizza',
allday: 'false',
borderColor: "#5173DA",
color: '#99ABEA',
location: '3rd Floor Boys',
textColor: "#000000",
description: "<p>This is just a fake description for the Free Pizza.</p><p>Nothing to see!</p>",
start: '2019-03-16T12:05:00',
end: '2019-03-16T12:55:00',
owner: 'Jason Tran'
}
],
eventRender: function(info) {
window.alert("eventRender called: " + isShowAll);
if(isShowAll) { //show all events
return true;
}
else if(info.event.extendedProps.owner!=thisOwner) { //if an event is not the owner's, remove it from display!
return false;
}
},
eventClick: function(info) {
/* Change modal html text dependent on event information*/
document.getElementById("myTitle").innerHTML = info.event.title;
document.getElementById("myLoc").innerHTML = info.event.extendedProps.location;
document.getElementById("myDesc").innerHTML = info.event.extendedProps.description;
document.getElementById("myTime").innerHTML = info.event.start + " - " + info.event.end;
/* Functionality for displaying and removing modal on click*/
var modal = document.getElementById('myModal');
var span = document.getElementsByClassName("close")[0];
modal.style.display = "block"; //show the modal display
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
});
calendar.render();
});
function myEventFunc() {
var checkBox = document.getElementById("myCheck");
if (checkBox.checked == true){
isShowAll=false;
} else {
isShowAll=true;
}
window.alert("myEventFunc called: " + isShowAll);
//calendar.rerenderEvents();
}
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
/* cursor pointer when hovering events */
.fc-event,
.fc-list-item {
cursor: pointer;
}
.e1Div {
background-color: #99ABEA;
color: #000;
border: solid 1px #5173DA;
float: left;
display: inline-block;
padding: 8px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="e1Div">
<input type="checkbox" id="myCheck" onClick="myEventFunc()" />
<label for="e1">My Events Only</label>
</div>
<div id='calendar'></div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2 id='myTitle'>Modal Header</h2>
</div>
<div class="modal-body">
<p id='myTime'>Some text in the Modal Body</p>
<p id='myDesc'>Some other text...</p>
</div>
<div class="modal-footer">
<h3 id='myLoc'>Modal Footer</h3>
</div>
</div>
</div>
</body>