FullCalendar clear selected days

I want to create a calendar that lets users select multiple days then create an event based on the selected days and also clear the selected days.

So far, I am able to select multiple days (Thanks to code from DanielST) and get the selected days. Now I want to implement a 'Refresh' button to clear currently selected days. However, I was not able to implement it yet. I have tried ('refetchEvents') and ('rerenderEvents'), but it is not working.

How do I achieve it?

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)
}

Ok I figured it out. The problem is that newEventSource is badly named...it's not really an event source - it's just an event! That's why you have to put it inside an array when you run addEventSource - it's actually describing one individual event within the source, and addEventSource will accept an array of events as input, without any of the other event source properties.

So if we treat it as an event, and add/remove it using the addEvent and removeEvents functions, it works properly:

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'
  }
});

Demo: http://jsfiddle.net/49mor6Lj/3/

For anyone interested here is the same concept implemented in the (at the time of writing) latest version 5 of fullCalendar: https://codepen.io/ADyson82/pen/GREQeJL