fullcalendar.js – 在按钮点击时删除事件

我正在使用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( "X" ); 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("
X
" ); 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("
X
" );} 

希望能帮助别人

Answer 3

我发现的方式：

 //HTML Code to add the button 
 Delete Events 

–

 //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='
Trash
'; 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("X"); } else { element.find(".fc-content").prepend("X"); } element.find(".closeon").on('click', function () { $('#calendar').fullCalendar('removeEvents', event._id); });