FullCalendar 按 ID 删除外部事件

Question

我正在使用 FullCalendar 和 jQuery UI 将 "Days Off" 作为背景事件拖到我的日历上。

由于您无法在 FullCalendar 中单击后台事件，因此我创建了一个包含我的休息日的列表，并在它们旁边创建了一个 "Remove" 按钮，并将事件 ID 作为数据属性。

但是，当我单击“删除”按钮时，它并没有删除该事件，即使它具有正确的 ID。

请看一下这个 jsFiddle：https://jsfiddle.net/aaroncadrian/odhL964L/

为了向您展示事件 ID 已正确更新，我删除了事件的背景渲染，以便您可以单击事件以显示其 ID。您还可以在按钮上及其 data-id 属性中查看事件 ID。这是删除事件的代码，它不起作用。

$('.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);

});

你能告诉我如何通过点击相应的按钮来删除事件吗？同样，理想情况下，我希望将这些被拖拽的事件呈现为背景事件。

更新

我在加载时向页面添加了一个事件及其对应的按钮，删除事件的功能有效，因为该事件是在页面加载时呈现的。那么，我需要做些什么不同的事情，才能以相同的方式删除拖放到日历上的外部事件？

Answer 1

https://jsfiddle.net/oLe2Lgxs/

改变了你的

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

至

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

和

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

至

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

让它从日历中删除项目。

不确定为什么使用内部事件 _id 在您分配的 id 不起作用的地方起作用。

您还可以使用 $(this).parent().remove();[=35= 删除 li date/button 条目] 在点击处理程序中。

FullCalendar 按 ID 删除外部事件

FullCalendar Remove External Event by ID

jquery

draggable

fullcalendar