Javascript fullcalendar.js - 删除按钮点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26530076/
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
fullcalendar.js - deleting event on button click
提问by guilima
I am using the fullCalendar.js and the current problem is making i lose so much time on something that might be simple to whose understand javascript (more specific jquery) better than me.
我正在使用 fullCalendar.js，当前的问题是让我在一些可能比我更容易理解 javascript（更具体的 jquery）的东西上浪费了太多时间。
The link of my example is at the bottom but my main concern is this part:
我的例子的链接在底部，但我主要关心的是这部分：
eventClick: function(event){
$(".closon").click(function() {
$('#calendar').fullCalendar('removeEvents',event._id);
});
},
I want to delete an event from the calendar with my close button and not on direct click of the event. I already tried using the $element.clickoutside of the eventClick trigger but it closed all the events on the calendar and the max i could reach was this poor situation, where the user need to click first on the calendar event and after on the 'X' to delete it.
我想使用关闭按钮从日历中删除一个事件，而不是直接单击该事件。我已经尝试使用$element.clickeventClick 触发器的外部，但它关闭了日历上的所有事件，我能达到的最大值是这种糟糕的情况，用户需要先点击日历事件，然后点击“X”才能删除它。
回答by CodeGodie
Remove the eventClick function and replace the eventAfterAllRender function with this:
删除 eventClick 函数并将 eventAfterAllRender 函数替换为：
eventRender: function(event, element) {
element.append( "<span class='closeon'>X</span>" );
element.find(".closeon").click(function() {
$('#calendar').fullCalendar('removeEvents',event._id);
});
}
回答by Sandy
Above solution works perfectly on the month view, but if you are on weekview and dayview, this solution will not work as pointed out by nextdoordoc above. Why? In weekview their is div element with ".fc-bg" as css class which is overlay with 25% opacity which blocks click event.
上述解决方案在月视图上完美运行，但如果您在周视图和日视图上，则此解决方案将无法如上面 nextdoordoc 所指出的那样工作。为什么？在weekview中，它们是带有“.fc-bg”的div元素作为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);
});
Adding pointer-events:noneallows click event propagation.
Note: This solution does not work in IE10 and older.
添加pointer-events:none允许点击事件传播。注意：此解决方案不适用于 IE10 及更早版本。
To work in IE10 you can directly append you delete button to (".fc-bg")
要在 IE10 中工作，您可以直接将删除按钮附加到 (".fc-bg")
here is example:
这是示例：
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>" );}
Hope to help someone
希望能帮助某人
回答by SohanLal Saini
This code may better help you. In this code remove icon display you whenever your mouse moving over event and whenever your mouse goes outside remove button will hide or removed.
此代码可能会更好地帮助您。在此代码中，每当您的鼠标移到事件上方时，移除图标就会显示您，并且每当您的鼠标移出移除按钮时，就会隐藏或移除。
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();
}
回答by Ragupathy
this will works for Month ,Week ,Day views
这适用于 Month , Week , Day 视图
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);
});
回答by Nearyuk
The way i found:
我发现的方式：
//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
});
});
