Fullcalendar.js - удаление события при нажатии кнопки

Я использую fullCalendar.js, и текущая проблема заключается в том, что я теряю столько времени на то, что может быть простым, чей javascript (более конкретный jQuery) лучше меня.

Ссылка на мой пример внизу, но моя главная проблема заключается в этой части:

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

Я хочу удалить событие из календаря с помощью кнопки "закрыть", а не сразу нажать событие. Я уже пробовал использовать $element.click вне триггера eventClick, но он закрыл все события в календаре, и максимум, который я смог достичь, - это плохая ситуация, когда пользователю нужно сначала щелкнуть по календарному событию, а после на "X" ', чтобы удалить его.

http://jsfiddle.net/59RCB/49/

Ответ 1

Удалите функцию eventClick и замените функцию eventAfterAllRender следующим образом:

        eventRender: function(event, element) {
            element.append( "<span class='closeon'>X</span>" );
            element.find(".closeon").click(function() {
               $('#calendar').fullCalendar('removeEvents',event._id);
            });
        }

Ответ 2

Выше решение отлично работает в режиме просмотра месяца, но если вы находитесь в режиме просмотра недели и дня, это решение не будет работать, как указано в следующем примере. Зачем? В weekview их элемент div с ".fc-bg" как класс css, который накладывается с непрозрачностью 25%, которая блокирует событие click.

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

Надеюсь помочь кому-то

Ответ 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
            });

 });

Ответ 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();
}