如何解决Fullcalendar v5如何使用复选框显示和隐藏事件
我正在尝试使用复选框显示和隐藏事件,我在堆栈上看到另一个问题,并尝试实现此处说明的相同配置: https://stackoverflow.com/a/62865578/5376930
我根据该答案制作了一支笔,但不起作用...请给我帮忙吗?
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:
[{"id":"1","title":"event1","start":"2020-07-01 19:30","end":"2020-07-02 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';
}
}
})
}
});
calendar.render();
var csx = document.querySelectorAll(".cs")
csx.forEach(function(el) {
el.addEventListener('change',function() {
calendar.refetchEvents();
console.log(el);
})
});
});
谢谢
解决方法
您的演示与其他问题之间的主要区别在于calendar.refetchEvents();
导致事件从动态(服务器端)事件源中重新获取,然后触发eventDidMount
。但是您已经使用了静态数据源,因此refetchEvents会查看该数据源并决定没有要重新提取的内容,因为它的数据是静态的,并且不知道在哪里寻找新事件。因此,它将事件保持原样,并且eventDidMount
不会触发,这意味着决定显示/隐藏事件的代码永远不会运行。
但是,您可以通过使用events-as-a-function功能并在“成功”回调中返回静态数组来模拟动态数据源。这会使fullCalendar误以为您的事件数据是动态的,因此每次调用refetchEvents
时都会重新绘制事件,从而在该过程中触发eventDidMount
回调。
赞:
events: function (fetchInfo,successCallback,failureCallback) {
successCallback([
{
id: "1",title: "event1",start: "2020-07-01 19:30",end: "2020-07-02 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"
}
]);
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。