【问题标题】:How do I delete this event from FullCalendar?如何从 FullCalendar 中删除此事件?
【发布时间】:2011-01-10 17:04:40
【问题描述】:

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

所以在eventClick我有这个功能:

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

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

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

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

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

我也尝试过使用过滤器,但是 return 语句上的断点永远不会命中。

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

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

我正在使用 FullCalendar v1.4.10

【问题讨论】:

    标签: javascript jquery fullcalendar


    【解决方案1】:

    当你所有的 id 都准备好后,使用 Tuan 的解决方案。

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

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

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

    【讨论】:

    • 嗨,它工作得很好。但是我必须删除一个事件,但是我没有任何方法可以获取内部日历事件 ID(又名_id)。既然你可以调用removeEvents 并传递一个id 或一个函数,我怎样才能在不使用_id 的情况下删除?使用函数或其他东西,但我不知道如何
    【解决方案2】:

    更简单:

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

    【讨论】:

    • 这应该是最好的答案兄弟=)
    • 这个答案不仅提供了很好的解决方案(无需使用任何 id!),还有助于理解 removeEvents 调用的工作原理(第二个参数可以是返回我们想要的事件的函数删除!)
    【解决方案3】:

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

    eventClick 的情况下,this 根据我在文档中阅读的内容指的是事件的 HTML。

    【讨论】:

      【解决方案4】:

      使用refetchEvents:

      cal.fullCalendar("refetchEvents");
      

      【讨论】:

        【解决方案5】:

        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");                
                }
              });   
        }
        

        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
        }
        

        【讨论】:

          【解决方案6】:

          我在 event.start 中使用了过滤功能,效果很好

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

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2018-08-08
            相关资源
            最近更新 更多