完整的日历插件不会删除事件

Question

i'm using full calendar plugin v3 . the problem is removeEventSource function does not work when i specify parameter. i've tried to put Id, URL as parametres, and use refetchEvents but no luck.

$('#calendar').fullCalendar( 'removeEventSource'); //working without parameters

$('#calendar').fullCalendar( 'removeEventSource', 1); //does not work

array:

var  events = [
            {    id: 1,

                title: 'dinner',
                start: '2016-09-14',
                end: '2016-09-14'
            },
            {    id: 2,
                title: 'All Day Event',
                start: '2016-09-10',
                end: '2016-09-10'
            },
            {   id: 3,
                title: 'Long Event',
                start: '2016-09-10',
                end: '2016-09-10'
            },
            {   id: 4,
                title: 'Repeating Event',
                start: '2016-09-09T16:00:00',
                end: '2016-09-09'
            }
        ]

intilize the calendar

 var calender = $('#calendar').fullCalendar({
    header: {
    left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: '2016-09-12',
        navLinks: true, 
        selectable: true,
        droppable: true,
        selectHelper: true,
        select: function(start, end) {
            var title = prompt('Event Title:');
            var eventData;
            if (title) {
                eventData = {
                    title: title,
                    start: start,
                    end: end
                };
                $('#calendar').fullCalendar('renderEvent', eventData, true); 
            }
            $('#calendar').fullCalendar('unselect');
        },
        drop: function() {
            if ($('#drop-remove').is(':checked')) {
                $(this).remove();
            }
        }
        ,
        editable: true,
        eventLimit: true, 
        events :  events
    });

click event

$('body').on('click','.fc-close',function(e){
    //alert('remove event');
    $('#calendar').fullCalendar( 'removeEventSource', 1);
    $('#calendar').fullCalendar( 'refetchEvents' );



    });

Answer 1

You are a bit confused over eventSources and events , an evenSource is a collection of events so when you pass that events in the initialization a default eventSource is initialized with no id that's why it's only working when you don't pass any id.Correct way to pass eventSource is embed you events inside it and give an id to each eventSource item like below

var eventSrc = [
                 {  
                    id:1,
                    events : [{                             
                                id: 1,
                                title: 'dinner',
                                start: '2016-09-14',
                                end: '2016-09-14'
                              },
                              {    
                                id: 2,
                                title: 'All Day Event',
                                start: '2016-09-10',
                                end: '2016-09-10'
                             }]
                 },
                 {  
                    id:2,
                    events : [{                                 
                                id: 1,
                                title: 'camping',
                                start: '2016-08-14',
                                end: '2016-08-14'
                              },
                              {    
                                id: 2,
                                title: 'sports day',
                                start: '2016-08-10',
                                end: '2016-08-10'
                             }]
                 }
               ]

In initialization

var calender = $('#calendar').fullCalendar({
                                            //other stuff
                                            eventSources : eventSrc
                                          });

Now just pass id of eventSource to remove it

$('#calendar').fullCalendar( 'removeEventSource', 1);