我试图在项目中集成FullCalendar 4.0.0-Beta.2，我需要的一个按钮是根据某个事件参数（in in in in in in in in in in in in in in in of这个案例）。我具有"仅我的事件"按钮的功能，该功能将正确设置布尔值isShowAll。我遇到的问题是使函数myEventFunc调用函数eventRender。使用calendar.rerenderEvents();似乎也无法正常工作。
我对JavaScript是相对较新的，因此，如果有一个简单的解决方案，我会更喜欢它。如果还有另一个（更好）解决基于给定名称过滤结果的整个目标的解决方案，请很好地解释一下！谢谢：）
calendar.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>
如果要在功能中访问日历，则可以执行类似的事情。
<script>
var isShowAll = true;
var thisOwner = "Pranay Agrawal";
var calendars = {};
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";
}
}
}
});
calendars.calendar = calendar;
calendar.render();
});
function myEventFunc() {
var checkBox = document.getElementById("myCheck");
if (checkBox.checked == true) {
isShowAll = false;
} else {
isShowAll = true;
}
window.alert("myEventFunc called: " + isShowAll);
console.log(calendars.calendar);
calendars.calendar.rerenderEvents();
}
</script>