Javascript 如何从 FullCalendar 中删除此事件?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4649357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 13:26:51  来源:igfitidea点击:

How do I delete this event from FullCalendar?

javascriptjqueryfullcalendar

提问by Brandon

The calendar lets the user drag a timeslot onto the calendar, however I would like them to be able to remove it if they click on it.

日历允许用户将时间段拖到日历上,但是我希望他们能够在点击它时将其删除。

So in the eventClick I have this function:

所以在 eventClick 我有这个功能:

function (calEvent) {
  removeRequestedEvent($(this), calEvent);
},

It just passes in the calendar event and the calendar itself.

它只是传入日历事件和日历本身。

removeRequestedBooking: function (cal, calEvent) {
    if (!confirm("Delete?"))
        return;

    cal.fullCalendar("removeEvents", calEvent.id);
    cal.fullCalendar("rerenderEvents");

    // Re-show draggable element
    $("#requests #" + calEvent.id).show();
}

I've also tried using a filter, but a breakpoint on the return statement is never hit.

我也尝试过使用过滤器,但从未命中过 return 语句上的断点。

    cal.fullCalendar("removeEvents", function (event) {
        return event.id == calEvent.Id;
    });

Any ideas? (I know the Id is right, and the last line works). Firebug doesn't show any errors in the javascript.

有任何想法吗?(我知道 Id 是正确的,最后一行有效)。Firebug 不会在 javascript 中显示任何错误。

I'm using FullCalendar v1.4.10

我正在使用 FullCalendar v1.4.10

采纳答案by justkt

Instead of using your passed in cal, can you try using a call to the div that holds your calendar?

您可以尝试使用对保存日历的 div 的调用,而不是使用传入的 cal 吗?

In the case of eventClick, thisrefers to the HTML for the event according to what I'm reading in the docs.

在的情况下eventClickthis指的是HTML根据什么我读的文档事件。

回答by elon

When you have all your id's in place use Tuan's solution.

当您准备好所有 ID 后,请使用 Tuan 的解决方案。

But when you do NOT have id's in your event do it like this (this work also when you have id's set):

但是,当您的活动中没有 id 时,请这样做(当您设置了 id 时也可以这样做):

eventClick: function(event){
   $('#myCalendar').fullCalendar('removeEvents',event._id);
}

Why this problem appear? The common reason for that is fullcalendar doesn't add id automatically when you're adding new event. If so, id which you have passed is undefined. Fullcalendar uses id in both cases when you're trying delete using id or filter. So when it's value is undefined it always return false. Meaning list of elements to delete is always empty.

为什么会出现这个问题?常见的原因是 fullcalendar 在您添加新事件时不会自动添加 id。如果是这样,您传递的 id 是未定义的。当您尝试使用 id 或过滤器进行删除时,Fullcalendar 在这两种情况下都使用 id。因此,当它的值未定义时,它总是返回 false。意思是要删除的元素列表始终为空。

回答by seddonym

Even simpler:

更简单:

eventClick: function(calEvent, jsEvent, view) {
    $('#calendar').fullCalendar('removeEvents', function (event) {
        return event == calEvent;
    });
}

回答by Julio

Use refetchEvents:

使用 refetchEvents:

cal.fullCalendar("refetchEvents");

回答by Dane Calderon

Justkt's answer took me a second to wrap my head around, but I'll post my results for any other noobs who need to see the code in a really simple way:

Justkt 的回答花了我一秒钟的时间,但我会为需要以非常简单的方式查看代码的任何其他菜鸟发布我的结果:

eventClick: function(event){
  var event_id = event.id;
  $.post('/Dropbox/finance/index.php/welcome/update', {"event_id": event_id},
      function(data){
          $('#calendar').fullCalendar("removeEvents",  (data));
          $('#calendar').fullCalendar("rerenderEvents");                
        }
      });   
}

The PHP (using codeignighter):

PHP(使用codeignighter):

public function update(){
  $result = $this->input->post('event_id');
  echo $result;
  // would send result to the model for removal from DB, or whatever
}

回答by Tuan

I use filter function with event.start and it works well

我将过滤器功能与 event.start 一起使用,效果很好

calendar.fullCalendar('removeEvents', function(event) {
  return 
    $.fullCalendar.formatDate(event.start, 'yyyyMMdd') 
    == $.fullCalendar.formatDate(start, 'yyyyMMdd');
});