fullcalendar removeEventSource is not working

Question

I'm using FullCalendar v2.3.0,

When I click a date, background color of the cell is changed as 'its booked', Its working perfectly with addEventSource,(stored selected date in an array) when im clicking once agian to the selected date, need to change the background color of the cell as white (available for booking),

How to remove the cell color as original? How to remove the event using .fullCalendar( 'removeEventSource', source ) for a particular date...

select: function (start, end, jsEvent, view, cell, calEvent) {
  if (jQuery.inArray(moment(start).format('YYYY-MM-DD'), sel_dates) == -1) {
    sel_dates.push(moment(start).format('YYYY-MM-DD'));           
    $("#calendar").fullCalendar('addEventSource', [{
      start: start,
      end: end,
      rendering: 'background'
    }]);
  }
  else {  
    sel_dates.pop(moment(start).format('YYYY-MM-DD'));
    // Here i need to change the cell background color
  }
}

ADyson ADyson · Accepted Answer · 2017-06-16T08:45:14

The correct method signature for select is function( start, end, jsEvent, view, [ resource ] ). See https://fullcalendar.io/docs/selection/select_callback. I don't know where you got the idea that it contained either "cell" or "calEvent"?

A selected area could be across multiple cells, so you can't change the background colour directly like this. Anyway, even if you could, this would make no difference, because you'd have to remove the event you previously added that is on top of the cells. An event is not merely some background colour - even a "background" event is actually an object that needs to be managed, although it may have the appearance of just a colour change.

Some suggestions:

1) I wouldn't add a whole event source just to create one event. An event source is intended to split large groups of events into logical blocks to make it easier to manage them, or fetch them from different servers.

Instead use renderEvent to create a new single event. https://fullcalendar.io/docs/event_rendering/renderEvent/. If you have any existing event sources you can optionally specify the ID of one to include it into.

2) To remove the event, as I've explained you can't just revert the background colour, you need to remove the actual event itself. You also can't use the "select" callback for this, because you can't be sure that the user will select the same sized area which actually matches any particular event.

One obvious way to allow deletion is to handle the "eventClick" callback (https://fullcalendar.io/docs/mouse/eventClick/) and ask the user to confirm whether they want to delete. If they agree, you can call the "removeEvents" method (https://fullcalendar.io/docs/event_data/removeEvents/) passing the ID of the event that the user clicked on.

fullcalendar removeEventSource is not working

1 Answers