我正在尝试将FullCalendar 4.0.0-beta.2集成到我的项目中，并且我需要的按钮之一是基于某个事件参数（在这种情况下为“名称”）过滤结果。我具有“仅我的事件”按钮的功能，该按钮将正确设置布尔值coords=None。我遇到的问题是使函数isShowAll调用函数myEventFunc。使用eventRender似乎也不起作用。
我对JavaScript比较陌生，因此，如果有一个简单的解决方案，我会更喜欢它。如果对于我根据给定名称过滤结果的整个目标还有另一种（更好的）解决方案，请解释清楚！谢谢：）
calendar.html：
calendar.rerenderEvents();
答案 0 :(得分：0)
如果要访问功能中的日历，可以执行以下操作。
<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>