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所指出的那样运行。为什么？在周视图中，他们的isdiv元素带有".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);
            });