FullCalendar 清除选定日期

Question

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

到目前为止，我可以选择多天（感谢code from DanielST）并获得选定的日期。现在我想实现一个“刷新”按钮来清除当前选定的日期。但是，我还不能实现它。我已经尝试过 ('refetchEvents') 和 ('rerenderEvents')，但它不起作用。

如何实现？

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/

对于任何对此感兴趣的人，在（撰写本文时）最新版本 5 中实现的概念相同：https://codepen.io/ADyson82/pen/GREQeJL