Tim Vermaelen Tim Vermaelen - 1 month ago 17
Javascript Question

FullCalendar removes all eventSources or events, either by event.id or event.source

Breaking my head over this and I need a little assistance.

Background Story

I'm creating a calendar selection tool to highlight free days as background events with fullCalendar. The UI allows a draggable selection of days or highlight a single day. When the user selects the highlight again, it should be removed. With AJAX I can add or remove the selections and when you refresh the page, the previous events are loaded from

data-events
on the container.

<div class="container" data-class="calendar" data-events='<?=$jsoncalendarinfo?>' data-user-id="<?php echo $id; ?>">
<div class="row">
<div class="col-lg-3 feedback p-y-2">
<?php
foreach ($calendarinfo as $item) {
?>
<ul data-start="<?=strtotime($item->date_from)?>">
<li>Vrij</li>
<li><?=date('d/m/Y',strtotime($item->date_from))?> - <?=date('d/m/Y',strtotime($item->date_to))?></li>
</ul>
<?php
}
?>
</div>
<div class="col-lg-9 calendar p-y-2"><!-- fullcalendar.js rendering --></div>
</div>
</div>


Problem

When I refresh the page and I click a single highlight (day or range), all highlights are removed. Now I must add I might be confused between
events
,
eventSource
and
eventSources
. The documentation isn't very explicit on the idea behind it so it's more like a trial and error for me.

My Code

eventSources: [this.formatEvents(this.events)],
selectOverlap: function (event) {
self.calendar.fullCalendar(events.removeEventSource, event.source);
self.removeFeedback(event);
return !event.block;
},


I've probably hijacked this functionality to get what I wanted but again, I can't seem to find a proper method to unselect a highlighted day or range. And it's not the
unselect
method.

Their code

There is no instance available in
selectOverlap
=>
self.calendar.fullCalendar

The doc states you can remove
eventSources
but not
events
???
I've tried to add my jsondata in
events
and in
eventSources
=> what's the f*** difference?
I've tried to remove by
event.id
and
event.source
=> they all vannish !?!
I've tried to cleanup the
event
object but in
event.sources.events
all events are generically deeply nested.
I dove into the library to see what's going on => ln. 11161

function removeEventSource(matchInput) {
removeSpecificEventSources(
getEventSourcesByMatch(matchInput)
);
}


// if called with no arguments, removes all.
function removeEventSources(matchInputs) {
if (matchInputs == null) {
removeSpecificEventSources(sources, true); // isAll=true
}
else {
removeSpecificEventSources(
getEventSourcesByMatchArray(matchInputs)
);
}
}


It basically never compares since the objects are too different. If I use my event.id it tries to compare against an event object. When I use
event.source
it finds all events under the same source and BAM, all gone :s

Anyone here to cheer me up?

DEMO

https://jsfiddle.net/tive/vxrkmmn3/

Simply click the highlighted dates. These are 2 ranges and should only remove one range. Unfortunately it removes all.
If you highlight another day or range, you can remove it without a problem. Once the page is refreshed, it doesn't work anymore.

Answer

Event sources are just ways of grouping events, useful if your events come from different sources (backends). If you don't have multiple backends, or other logical grouping of events, you probably don't need them.

So if you remove an event source, you'll remove all the events that came from that source.

If you are trying to remove a single event when you select it, then the RemoveEvents method is the one you need.

The signature is:

.fullCalendar( 'removeEvents' [, idOrFilter ] )

where idOrFilter is either an eventID (which you can get from the event object provided by the selectOverlap method), or a function which looks at an event and decides if it should be removed or not.

Full docs at https://fullcalendar.io/docs/event_data/removeEvents