Я использую fullCalendar.js, и текущая проблема заключается в том, что я теряю столько времени на то, что может быть простым, чей javascript (более конкретный jQuery) лучше меня.
Ссылка на мой пример внизу, но моя главная проблема заключается в этой части:
eventClick: function(event){
$(".closon").click(function() {
$('#calendar').fullCalendar('removeEvents',event._id);
});
},
Я хочу удалить событие из календаря с помощью кнопки "закрыть", а не сразу нажать событие. Я уже пробовал использовать $element.click вне триггера eventClick, но он закрыл все события в календаре, и максимум, который я смог достичь, - это плохая ситуация, когда пользователю нужно сначала щелкнуть по календарному событию, а после на "X" ', чтобы удалить его.
Удалите функцию eventClick и замените функцию eventAfterAllRender следующим образом:
eventRender: function(event, element) {
element.append( "<span class='closeon'>X</span>" );
element.find(".closeon").click(function() {
$('#calendar').fullCalendar('removeEvents',event._id);
});
}
Выше решение отлично работает в режиме просмотра месяца, но если вы находитесь в режиме просмотра недели и дня, это решение не будет работать, как указано в следующем примере. Зачем? В 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>" );}
Надеюсь помочь кому-то
Как я нашел:
//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
});
});
Этот код может помочь вам. В этом коде значок удаления отображается каждый раз, когда ваша мышь перемещается по событию и всякий раз, когда ваша кнопка мыши выходит наружу, кнопка будет скрыта или удалена.
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();
}