CODEWITHSUNDEEP
fullcalendar
Ted Scheckler
Ted Scheckler

Reputation: 1511

fullcalendar.io removeEventSource on dynamic events

I have event sources added to a fullcalendar object dynamically (addEventSource).

I do not understand how to reference these event sources to remove them with removeEventSource.

I have an example here: http://jsfiddle.net/64L4npzo/

calendar = jQuery("#calendar").fullCalendar();

event_count = 0;
jQuery(document).on("click", ".add_random_event", function() {
    event_count++;
    var json_source = [ { title  : 'event to remove', start  : '2015-11-04' } ];
    calendar.fullCalendar('addEventSource', json_source);
    jQuery("<div class='remove_event_source' event_count='" + event_count + "'>Remove Event " + event_count + "</div><br>").appendTo("#event_removal");

});

jQuery(document).on("click", ".remove_event_source", function() {
    calendar.fullCalendar("removeEventSource", jQuery(this).attr("event_count"));
    console.log("Tried to remove event #" + jQuery(this).attr("event_count"));                
});

I've read this solution but I'm not sure how to apply it: Problem removing event sources from FullCalendar (jQuery)

Upvotes: 0

Views: 1074

Answers (2)

Bob Nocraz
Bob Nocraz

Reputation: 446

If you attach your source object as a data attribute to the 'remove this source' button, you can then use that data attribute later as the source in the removeEventSource method.

During addEventSource:

jQuery("<div class='remove_event_source' event_count='" + event_count + "'>Remove Event " + event_count + "</div><br>").data('source', json_source).appendTo("#event_removal");

When using removeEventSource:

calendar.fullCalendar("removeEventSource", jQuery(this).data('source'));

I've also made a few changes to make sure your source object is unique and updated the jsfiddle: http://jsfiddle.net/64L4npzo/4/

Upvotes: 1

Pitchai P
Pitchai P

Reputation: 1317

To remove events, you need a source. The source may be an object that provides some data about events.

You can see the list of event source options here

So, in your case, I add a className to events and the events would be referred by that className.

calendar = jQuery("#calendar").fullCalendar();

event_count = 0;
var json_source = [ { title  : 'event to remove', start  : '2015-11-04', className: 'test' } ];
jQuery(document).on("click", ".add_random_event", function() {
event_count++;   
calendar.fullCalendar('addEventSource', json_source);
jQuery("<div class='remove_event_source' event_count='" + event_count + "'>Remove Event " + event_count + "</div><br>").appendTo("#event_removal");

});

jQuery(document).on("click", ".remove_event_source", function() {
calendar.fullCalendar("removeEventSource", json_source);
console.log("Tried to remove event #" + jQuery(this).attr("event_count"));                
});

The updated fiddle is here.

http://jsfiddle.net/64L4npzo/1/

Upvotes: 1

Related Questions