[英]FullCalendar: remove events on button click
I am trying to remove a dynamically selected event from FullCalendar.我正在尝试从 FullCalendar 中删除动态选择的事件。
when this event is rendered it will be also displayed in the table with a delete button at the end of every row.呈现此事件时,它还会显示在表格中,每行末尾都有一个删除按钮。
what i want to do is when I click the delete button, it will also delete the event on the calendar.我想要做的是当我点击删除按钮时,它也会删除日历上的事件。 I can remove the row from the table but not in the calendar.
我可以从表中删除行,但不能在日历中删除。
here is my code for selecting the event这是我选择事件的代码
var eventID = 0;
$('.calendar').fullCalendar({
select: function(start, end, event, view, resource) {
if(start.isBefore(moment())) {
$('.calendar').fullCalendar('unselect');
swal('Ooops!','You cannot select past date/time!','error')
}else{
$('#reserved_date').val(moment(start).format("YYYY-MM-DD"))
$('#end_time').val(moment(end).format("hh:mm A"));
$('#start_time').val(moment(start).format("hh:mm A"));
$('#newScheduleModal').modal({
show : true,
backdrop: 'static',
keyboard: false
});
eventData = {
id: eventID +1,
title: 'Lesson Schedule',
start: start,
end: end,
};
}
$(".fc-highlight").css("background", "red");
},
events: obj,
eventRender:function( ev, element ) {
eventID++;
$('#sched_data').append('<tr class="tb-row">'+
'<td>'+moment(ev.start).format('MMM. DD, YYYY')+'</td>'+
'<td>'+moment(ev.start).format('hh:mm A')+'</td>'+
'<td>'+moment(ev.end).format('hh:mm A')+'</td>'+
'<td><button class="btn btn-danger btn-del btn-xs" data-id"'+ev._id+'"><i class="fa fa-times"></i></button></td></tr>'
)
},
})
here's the code for rendering the event to calendar这是将事件渲染到日历的代码
$('#btn-reserve').click(function(){
$('.calendar').fullCalendar('renderEvent', eventData, true);
})
and here's my code for deleting an event这是我删除事件的代码
$('body').on('click','.btn-del',function(){
$(this).closest('.tb-row').remove();
$('.calendar').fullCalendar('removeEvents', $(this).data('id'));
})
I already did it,我已经做到了,
My code:我的代码:
$('body').on('click','.btn-del',function(){
$(this).closest('.tb-row').remove();
$('.calendar').fullCalendar('removeEvents', $(this).data('id'));
})
What it should be它应该是什么
$('body').on('click','.btn-del',function(){
var del_btn = $(this);
del_btn.closest('.tb-row').remove();
$(".calendar").fullCalendar('removeEvents', function(event) {
return event.id == del_btn.data('id');
});
})
the second parameter should be a function and not just the plain id.第二个参数应该是一个函数,而不仅仅是普通的 id。
If you to delete an event with the eventClick
you can try like this :如果您使用
eventClick
删除事件,您可以尝试这样:
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, /*OPTIONS*/);
calendar.on('eventClick', function (info) {
calendar.getEventById(info.event.id).remove();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.