FullCalendar Remove External Event by ID

问题:

I am using FullCalendar and jQuery UI to drag "Days Off" onto my calendar as background events.

Since you cannot click on background events in FullCalendar, I am creating a list with my days off and a "Remove" button next to them with the event id as a data attribute.

However, when I click on the Remove button, it does not remove the event, even though it has the proper ID.

Please take a look at this jsFiddle: https://jsfiddle.net/aaroncadrian/odhL964L/

For the sake of showing you that the event ID has been properly updated, I removed the background rendering of the event so that you can click on the event to reveal its ID. You can also see the event ID on the button and in its data-id attribute. Here is the code for removing the event, which does not work.

$('.remove').click(function(){

    // Get the ID for the event from the button
    var id = $(this).data('id');

    // Remove the event. **DOES NOT WORK**
    $('#calendar').fullCalendar('removeEvents', id);

});

Can you please let me know how I can remove an event by clicking on its corresponding button? Again, ideally I'd like for these events that are being dragged on to be rendered as background events.

UPDATE

I added an event and its corresponding button to the page at load, and the function to remove the event works since the event was rendered on page load. So what do I need to do differently so that external events that were dropped onto the calendar will be removable in the same way?

回答1:

https://jsfiddle.net/oLe2Lgxs/

Changed your

var button = '<button class="remove" data-id="' + event.id +'">Remove (' + event.id + ')</button>'; // Create remove button with data-id attribute with event ID

to

var button = '<button class="remove" data-id="' + event._id +'">Remove (' + event.id + ')</button>'; // Create remove button with data-id attribute with event ID

and the

$('.remove').click(function(){

to

$('#daysOff').on('click', 'button.remove', function(){

to get it removing the items from calendar.

Not sure why using the internal event _id works where your assigned id one wasn't working.

You can also remove the li date/button entry with $(this).parent().remove(); inside the click handler.