如何在 Fullcalendar v5 中显示和隐藏事件
How to show and hide events in Fullcalendar v5
我正在尝试根据 extraparam 值显示和隐藏事件。
但是它没有按预期工作。如有任何建议,我们将不胜感激。
js:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
now: '2020-07-11',
scrollTime: '00:00',
aspectRatio: 1.8,
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
initialView: 'dayGridMonth',
events: {
url: 'feed.php',
method: 'POST'
},
eventDidMount: function(arg) {
var cs = document.querySelectorAll('input.cs:checked');
cs.forEach(function(v) {
if(arg.event.extendedProps.cid == v.value) {
arg.el.style.display = 'block';
} else {
arg.el.style.display = 'none';
}
})
}
});
calendar.render();
var csx = document.querySelectorAll(".cs")
csx.forEach(function(el) {
el.addEventListener('change', function() {
calendar.refetchEvents();
console.log(el);
})
});
});
html:
<input class="cs" value="1" type="checkbox" checked>Calendar1<br>
<input class="cs" value="2" type="checkbox" checked>Calendar2
<div id='calendar'></div>
feed.php returns:
[{"id":"1","title":"event1","start":"2020-07-07 19:30","end":"2020-07-08 19:30 ","backgroundColor":"#39CCCC","cid":"1"},{"id":"2","title":"event2","start":"2020-07-09 19:30","end":"2020-07-10 19:30","backgroundColor":"#F012BE","cid":"2"}]
这有效:
eventDidMount: function(arg) {
var cs = document.querySelectorAll('.cs');
cs.forEach(function(v) {
if(v.checked){
if(arg.event.extendedProps.cid === v.value) {
arg.el.style.display = 'block';
}
} else {
if(arg.event.extendedProps.cid === v.value) {
arg.el.style.display = 'none';
}
}
})
}
我正在尝试根据 extraparam 值显示和隐藏事件。 但是它没有按预期工作。如有任何建议,我们将不胜感激。
js:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
now: '2020-07-11',
scrollTime: '00:00',
aspectRatio: 1.8,
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
initialView: 'dayGridMonth',
events: {
url: 'feed.php',
method: 'POST'
},
eventDidMount: function(arg) {
var cs = document.querySelectorAll('input.cs:checked');
cs.forEach(function(v) {
if(arg.event.extendedProps.cid == v.value) {
arg.el.style.display = 'block';
} else {
arg.el.style.display = 'none';
}
})
}
});
calendar.render();
var csx = document.querySelectorAll(".cs")
csx.forEach(function(el) {
el.addEventListener('change', function() {
calendar.refetchEvents();
console.log(el);
})
});
});
html:
<input class="cs" value="1" type="checkbox" checked>Calendar1<br>
<input class="cs" value="2" type="checkbox" checked>Calendar2
<div id='calendar'></div>
feed.php returns: [{"id":"1","title":"event1","start":"2020-07-07 19:30","end":"2020-07-08 19:30 ","backgroundColor":"#39CCCC","cid":"1"},{"id":"2","title":"event2","start":"2020-07-09 19:30","end":"2020-07-10 19:30","backgroundColor":"#F012BE","cid":"2"}]
这有效:
eventDidMount: function(arg) {
var cs = document.querySelectorAll('.cs');
cs.forEach(function(v) {
if(v.checked){
if(arg.event.extendedProps.cid === v.value) {
arg.el.style.display = 'block';
}
} else {
if(arg.event.extendedProps.cid === v.value) {
arg.el.style.display = 'none';
}
}
})
}