完整日历:在 dayGrid 视图中单击按钮时删除事件

Question

我正在尝试使用以下方法删除按钮单击时的事件：

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

但它会删除日历中的所有事件，而不是单击的事件。我已经尝试了提供的其他解决方案，但它们要么带有列表项视图，要么是日议程视图(v4 中的 timeGrid(，而我只使用月视图 (dayGrid(。我的全日历js如下：

<script src="{{ URL::asset('fullcalendar/packages/core/main.js') }}"></script>
<script src="{{ URL::asset('fullcalendar/packages/interaction/main.js') }}"></script>
<script src="{{ URL::asset('fullcalendar/packages/daygrid/main.js') }}"></script>
<script src="{{ URL::asset('moment/moment.js') }}"></script>
<script src="{{ URL::asset('js/jQuery.min.js') }}"></script>
<script>
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'bootstrap' ],
themeSystem: 'bootstrap',
header: {
left: false,
center: 'title',
},
defaultView: 'dayGridMonth',
validRange: {
start: '2019-08-26',
end: '2019-09-26',
},   
selectable: true,
editable  : true,
droppable : true,
eventSources: [
{
url: '{{"roster/getEvents"}}',
allDay: false,
allDayMaintainDuration: false,
textColor: 'black',
},
{
url: '{{"roster/getGazette"}}',
editable: false,
overlap: false,
},
],
});
calendar.render();
});
</script>

注意：我也尝试使用这样的对话框：

eventClick: function(calEvent, jsEvent, view) {
id= calEvent.id;
$( "#dialog" ).dialog({
resizable: false,
height:100,
width:500,
modal: true,
title: 'Want you want to do?',
buttons: {
CLOSE: function() {
$("#dialog").dialog( "close" );
},
"DELETE": function() {
//do the ajax request?
}
}
});
},

但它给出了"类型错误 $(...(。对话框不是功能"，单击时。

Answer 1

解决方案：首先我更正了我的代码，我使用的是 fullCalendar v4 库，我使用的是产生冲突的 v3 函数。然后我在html中使用bootsrap模态，并在JS中调用它。最后我用Ajax调用删除事件 代码如下：

$(document).ready(function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'bootstrap'],
themeSystem: 'bootstrap',
header: {
left: false,
center: 'title',
},
defaultView: 'dayGridMonth',
validRange: {
start: '2019-08-26',
end: '2019-09-26',
},   
selectable: true,
editable  : true,
droppable : true,
eventClick: function(info) {
id = info.event.id;
$("#myModal").modal();
window.deleteRecord=function() {
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="edit-token"]').attr('content')
},
type: "POST",
url: "{{route('deleteRecord')}}",
data: JSON.stringify(id),
contentType: "application/json; charset=utf-8",
dataType: "json",
}).done( function(data){
console.log('Ajax was Successful!');
console.log(data); 
location.reload(true); 
}).fail(function(data){
console.log('Ajax Failed');
});
}
},
eventSources: [
{
url: '{{"roster/getEvents"}}',
allDay: false,
allDayMaintainDuration: false,
textColor: 'black',
},
{
url: '{{"roster/getGazette"}}',
editable: false,
overlap: false,
},
],
});
calendar.render();
});