FullCalendar 清除所选日期

Question

我想创建一个允许用户 select 多天的日历，然后根据 selected 天创建事件并清除 selected 天。

到目前为止，我可以 select 多天（感谢）并获得 selected 天数。现在我想实现一个 'Refresh' 按钮来清除当前 selected 天。但是，我还无法实施它。我已经尝试了 ('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 的命名不正确...它并不是真正的事件 source - 它只是一个 event！这就是为什么当你运行 addEventSource 时你必须把它放在一个数组中 - 它实际上描述了源中的一个单独事件，并且 addEventSource 将接受一组事件作为输入，没有任何其他事件源属性。

因此，如果我们将其视为一个事件，并且 add/remove 使用 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 的 fullCalendar 中实现了相同的概念：https://codepen.io/ADyson82/pen/GREQeJL

FullCalendar 清除所选日期

FullCalendar clear selected days

jquery

fullcalendar

fullcalendar-3