FullCalendar清除选定的日期

Question

我想创建一个日历，允许用户选择多个日期，然后根据所选日期创建一个事件，并清除所选日期。

到目前为止，我能够选择多个天(感谢DanielST的代码)并获得所选的天。现在我想实现一个"刷新"按钮来清除当前选定的日子。然而，我还不能实现它。我已经尝试过('refetchEvents')和(' rerendevents ')，但它不工作。

我如何实现它?

JS (JSFiddle):

window.selectedDates = [];
window.batchEvents = [];
window.batchIDs = [];
$('#calendar').fullCalendar({
defaultDate: '2014-11-10',
defaultView: 'month',
events: [{
start: '2014-11-12T13:00:00',
end: '2014-11-12T16:00:00',
}, ],
selectable: true,
select: function(start, end, jsEvent, view) {
let startDate = start.format();
console.log('start: ' + startDate);
let newID = randomIntFromInterval(0,100);
window.batchIDs.push({id:newID});
let newEventSource = {
id: newID,
start: start,
end: end,
rendering: 'background',
block: true,
};
window.batchEvents.push(newEventSource);
$("#calendar").fullCalendar('addEventSource', [newEventSource]);
$("#calendar").fullCalendar("unselect");
window.selectedDates.push(startDate);
},
selectOverlap: function(event) {
return !event.block;
},
unselectAuto: true,
unselect: function(jsEvent,view) {
//console.log(jsEvent);
},
customButtons: {
refreshbutton: {
text: 'refresh',
click: function () {
console.log('refresh clicked');
console.log(window.batchEvents);        
console.log(window.batchIDs);
$("#calendar").fullCalendar('removeEventSources',window.batchEvents);
window.selectedDates = [];
window.batchIds = [];
}
},
selectedButton: {
text: 'Check Days',
click: function () {
console.log(window.selectedDates);
console.log(window.batchEvents);
}
}
},
header: {
left: 'prev,next today refreshbutton selectedButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
});
function randomIntFromInterval(min, max) { // min and max included 
return Math.floor(Math.random() * (max - min + 1) + min)
}

Answer 1

好吧，我明白了。问题是newEventSource的名字不好…它不是真正的事件源-这只是一个事件！ 这就是为什么当你运行addEventSource时，你必须把它放在一个数组中——它实际上是在源中描述一个单独的事件，而addEventSource将接受事件数组作为输入，而不需要任何其他事件源属性。

因此，如果我们将其视为一个事件，并使用addEvent和removeEvents函数添加/删除它，它可以正常工作:

var selectedDates = [];
var batchIDs = [];
var id = 1;
$('#calendar').fullCalendar({
defaultDate: '2014-11-10',
defaultView: 'month',
events: [{
start: '2014-11-12T13:00:00',
end: '2014-11-12T16:00:00',
}, ],
selectable: true,
select: function(start, end, jsEvent, view) {
let startDate = start.format();
let newID = id;
id++;
console.log('start: ' + startDate, "id: " + newID);
let newEvent = {
id: newID,
start: start,
end: end,
rendering: 'background',
block: true,
};
batchIDs.push(newID);
$("#calendar").fullCalendar('renderEvent', newEvent, true);
$("#calendar").fullCalendar("unselect");
selectedDates.push(startDate);
},
selectOverlap: function(event) {
return !event.block;
},
unselectAuto: true,
unselect: function(jsEvent, view) {
//console.log(jsEvent);
},
customButtons: {
refreshbutton: {
text: 'refresh',
click: function() {
console.log('refresh clicked');
console.log(batchIDs);
for (var id = 0; id < batchIDs.length; id++)
{
console.log(batchIDs[id]);
$("#calendar").fullCalendar('removeEvents', batchIDs[id]);
}
selectedDates = [];
}
},
selectedButton: {
text: 'Check Days',
click: function() {
console.log(selectedDates);
}
}
},
header: {
left: 'prev,next today refreshbutton selectedButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
});

演示:http://jsfiddle.net/49mor6Lj/3/

对于感兴趣的人来说，这里有相同的概念在fullCalendar的最新版本5中实现:https://codepen.io/ADyson82/pen/GREQeJL