Fullcalendar v5 如何使用复选框显示和隐藏事件
Fullcalendar v5 how to show and hide events with checkbox
我正在尝试使用复选框显示和隐藏事件,我在堆栈上看到另一个问题并尝试实现此处解释的相同配置:
我根据那个答案做了一支笔,但没有用...可以帮我吗?
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();
导致事件 re-fetched 来自动态 (server-side) 事件源,然后导致 eventDidMount
被触发。但是您使用的是静态数据源,所以 refetchEvents 会查看它并决定没有什么可以重新获取的,因为它的数据是静态的并且它不知道在哪里寻找新事件。因此它让事件保持原样,并且 eventDidMount
不会触发,这意味着决定 show/hide 你的事件永远不会运行的代码。
但是,您可以使用 events-as-a-function 功能模拟动态数据源,并在“成功”回调中返回静态数组。这让 fullCalendar 误以为您的事件数据是动态的,因此每次调用 refetchEvents
时都会 re-draws 事件,从而在过程中触发 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"
}
]);
},
我正在尝试使用复选框显示和隐藏事件,我在堆栈上看到另一个问题并尝试实现此处解释的相同配置:
我根据那个答案做了一支笔,但没有用...可以帮我吗?
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();
导致事件 re-fetched 来自动态 (server-side) 事件源,然后导致 eventDidMount
被触发。但是您使用的是静态数据源,所以 refetchEvents 会查看它并决定没有什么可以重新获取的,因为它的数据是静态的并且它不知道在哪里寻找新事件。因此它让事件保持原样,并且 eventDidMount
不会触发,这意味着决定 show/hide 你的事件永远不会运行的代码。
但是,您可以使用 events-as-a-function 功能模拟动态数据源,并在“成功”回调中返回静态数组。这让 fullCalendar 误以为您的事件数据是动态的,因此每次调用 refetchEvents
时都会 re-draws 事件,从而在过程中触发 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"
}
]);
},