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);
            });

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

5 个答案: