fullcalendar event filter select almost working - fullcalendar

Question

Im trying to filter events in fullcalendar on select change which almost works.
This is my dropdown
<select id="dropdown">
<option value="All" data-feed="all-feed.php" selected>All</option>
<option value="This" data-feed="this-feed.php">This</option>
<option value="That" data-feed="that-feed.php">That</option>
</select>
This my script
$(document).ready(function(){
var feed = $('#dropdown').find(':selected').data('feed');
$('#calendar').fullCalendar({
locale: 'de',
editable: false,
firstDay: 1,
events: feed,
eventLimit: 3,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listWeek'
}
});
$('#dropdown').change(onSelectChangeFeed);
function onSelectChangeFeed() {
var feed = $(this).find(':selected').data('feed');
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', feed);
};
});
This works untill I click the next or prev buttons. Then all events Ive filtered are added somehow in the "background": https://streamable.com/qnqwd
Ive also tried this function but then the events are added directly.
function onSelectChangeFeed() {
$('#calendar').fullCalendar('removeEventSource', feed);
$('#calendar').fullCalendar('refetchEvents');
var feed = $(this).find(':selected').data('feed');
$('#calendar').fullCalendar('addEventSource', feed);
$('#calendar').fullCalendar('refetchEvents');
};
Heres a fiddle https://jsfiddle.net/4j5s9yp2/5/

Answer 1

Your code doesn't quite work consistently, because you use "events" and "eventSources" interchangeably, and they are not the same concept. You also try to remove an eventSource with the wrong ID - as per the example in JSFiddle, by the time you call var feed = $(this).find(':selected').data('feed');, feed is set to the newly selected feed value. Therefore it cannot match it to an event source in the calendar to remove, because the event source currently defined is the old feed value.
This version resolves both issues:
var selectedFeed = $('#dropdown').find(':selected').data('feed');
$('#calendar').fullCalendar({
locale: 'de',
editable: false,
firstDay: 1,
displayEventTime: false,
eventSources: [ selectedFeed ], //event source, not "events" directly
eventLimit: 3,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listWeek'
},
loading: function(bool) {
if (bool) {
$(this).parent().find('#loading').fadeIn( "300");
}else {
$(this).parent().find('#loading').fadeOut( "300");
}
}
});
$('#dropdown').change(onSelectChangeFeed);
function onSelectChangeFeed() {
var feed = $(this).find(':selected').data('feed');
$('#calendar').fullCalendar('removeEventSource', selectedFeed); //remove _old_ feed value
$('#calendar').fullCalendar('addEventSource', feed);
selectedFeed = feed; //set currently selected feed to the new value
};
See https://jsfiddle.net/4j5s9yp2/6/ for a working example.