fullcalendar.js - 在按钮单击时删除事件

Question

我正在使用fullCalendar.js,目前的问题是让我失去了太多的时间在一些可能比我理解的javascript(更具体的jquery)更简单的东西上.

我的例子的链接在底部,但我主要担心的是这部分:

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

我想通过关闭按钮从日历中删除事件,而不是直接点击事件.我已经尝试使用$element.clickeventClick触发器的外部,但它关闭了日历上的所有事件,并且我可以达到的最大值是这种糟糕的情况,用户需要先点击日历事件并在'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>" );}

希望能帮助别人