fullcalendar.js - 在按鈕單擊時刪除事件

Question

我正在使用fullCalendar.js，目前的問題是讓我失去了太多的時間在一些可能比我理解的javascript（更具體的jquery）更簡單的東西上。

我的例子的鏈接在底部，但我主要擔心的是這部分：

eventClick: function(event){
  $(".closon").click(function() {
     $('#calendar').fullCalendar('removeEvents',event._id);
  });
},    

我想通過關閉按鈕從日歷中刪除事件，而不是直接點擊事件。 我已經嘗試在eventClick觸發器之外使用$element.click ，但它關閉了日歷上的所有事件，並且我可以達到的最大值是這種糟糕的情況，用戶需要先點擊日歷事件，然后點擊' X'刪除它。

http://jsfiddle.net/59RCB/49/

Answer 1

刪除eventClick函數並將eventAfterAllRender函數替換為：

        eventRender: function(event, element) {
            element.append( "<span class='closeon'>X</span>" );
            element.find(".closeon").click(function() {
               $('#calendar').fullCalendar('removeEvents',event._id);
            });
        }

Answer 2

以上解決方案在月視圖上完美運行，但如果您使用的是周視圖和日視圖，則此解決方案將無法正常工作，如上面的nextdoordoc所指出的那樣。 為什么？ 在周視圖中，它們是div元素，“。fc-bg”作為css類，它覆蓋了25％不透明度，阻止了點擊事件。

Workarround：

eventRender: function(event, element) { 
       element.find(".fc-bg").css("pointer-events","none");
       element.append("<div style='position:absolute;bottom:0px;right:0px' ><button type='button' id='btnDeleteEvent' class='btn btn-block btn-primary btn-flat'>X</button></div>" );
       element.find("#btnDeleteEvent").click(function(){
            $('#calendar').fullCalendar('removeEvents',event._id);
       });

添加pointer-events:none允許單擊事件傳播。 注意：此解決方案在IE10及更早版本中不起作用。

要在IE10中工作，您可以直接將刪除按鈕添加到(".fc-bg")

這是一個例子：

eventRender: function(event, element) { 
   element.find(".fc-bg").append("<div style='position:absolute;bottom:0px;right:0px' ><button type='button' id='btnDeleteEvent' class='btn btn-block btn-primary btn-flat'>X</button></div>" );}

希望能幫助別人

Answer 3

我發現的方式：

//HTML Code to add the button

<div id='calendar'></div>
<button id='Delete'>Delete Events</button></p> 

-

//Our Js data
{id: '1', resourceId: 'a' , start: '2015-10-16T10:52:07', end: '2015-10-16T21:00:00', url: 'https//www.google.com', title: 'How to delete Events'},
{id: '2', resourceId: 'b' , start: '2015-10-16T11:00:10', end: '2015-10-18T17:03:00', title : 'Can we delete multiple events ?'},
{id: '2', resourceId: 'c' , start: '2015-10-16T10:00:00', end: '2015-10-16T23:00:02', title : 'How ?'},
],

//Need to set our button
select: function(start, end, jsEvent, view, resource) {
        console.log(
        'select callback',
        start.format(),
        end.format(),
        resource ? resource.id : '(no resource)'
        );
        }
        });

        //Our button to delete Events
        $('#Delete').on('click', function() {
        $('#calendar').fullCalendar('removeEvents', 2); //Remove events with the id: 2
            });

 });

Answer 4

此代碼可能更好地幫助您。 在此代碼中，刪除圖標會在鼠標移動到事件時顯示您，並且只要您的鼠標移到外面，刪除按鈕就會隱藏或刪除。

eventMouseover:function(event,domEvent,view){

    var el=$(this);

    var layer='<div id="events-layer" class="fc-transparent"><span id="delbut'+event.id+'" class="btn btn-default trash btn-xs">Trash</span></div>';
    el.append(layer);

    el.find(".fc-bg").css("pointer-events","none");

    $("#delbut"+event.id).click(function(){
        calendar.fullCalendar('removeEvents', event._id);
    });
},
eventMouseout:function(event){
    $("#events-layer").remove();
}

Answer 5

這適用於月，周，日視圖

eventRender: function (event, element, view) {

            if (view.name == 'listDay') {
                element.find(".fc-list-item-time").append("<span class='closeon'>X</span>");
            } else {
                element.find(".fc-content").prepend("<span class='closeon'>X</span>");
            }
            element.find(".closeon").on('click', function () {
                $('#calendar').fullCalendar('removeEvents', event._id);
            });