FullCalendar通过ID删除外部事件 [英] FullCalendar Remove External Event by ID

问题描述

由于您无法点击FullCalendar中的后台事件，因此我是在FullCalendar中使用FullCalendar和jQuery UI将Days Off拖放到日历中作为后台事件。创建一个关闭我的日子的列表和一个删除按钮旁边的事件ID作为数据属性。

然而，当我点击删除按钮时，它不会删除该事件，即使它具有正确的ID。

请查看此jsFiddle： https://jsfiddle.net/aaroncadrian/odhL964L/

为了向你展示事件ID已被正确更新，我删除了事件的背景渲染，以便您可以单击该事件以显示其ID。您还可以在按钮和data-id属性中看到事件ID。

  $（'。remove'）。click（function（ ）{
 
 //从按钮
 var id = $（this）.data（'id'）; 
 
 //获取事件的ID删除事件**不工作** 
 $（'＃calendar'）。fullCalendar（'removeEvents'，id）; 
 
}）; 
  

您可以让我知道如何通过点击相应的按钮来删除事件吗？理想情况下，我希望将这些正在拖动的事件渲染为背景事件。

更新

我在加载时向页面添加了一个事件及其相应的按钮，并且由于该事件在页面加载时呈现，因此删除该事件的函数可以工作。那么，我需要做些什么不同的事情才能使外挂到日历上的事件以相同的方式移除？ 解决方案

https://jsfiddle.net/oLe2Lgxs/

更改您的

  var button ='< button class =removedata-id ='+ event。 id +'>删除（'+ event.id +'）< / button>'; //创建具有事件ID 
  

到

$ b $的data-id属性的删除按钮b

  var button ='< button class =removedata-id ='+ event._id +'> Remove（'+ event。 id +'）< / button>'; //使用事件ID 
  

和

$ b创建带有data-id属性的remove按钮
$ b

  $（'。remove'）。click（function（）{
  

$（b）

至

  $（'＃daysOff'）。 'button.remove'，函数（）{
  

让它从日历中移除项目。 p>

不确定为什么使用内部事件 _id 在指定的 id 一个不起作用的地方工作。

您还可以使用 li 日期/按钮条目删除 $（this）.parent（）。remove（）; 里面点击处理程序。

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?

解决方案

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.

这篇关于FullCalendar通过ID删除外部事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！