Fullcalendar v4:addEvent()在自定义视图中不起作用

Question

我使用的是fullcalendar v4(https://fullcalendar.io/)我正试图在自定义视图"timeGridSixMonth"中刷新已删除的事件。

var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
defaultView: 'timeGridSixMonth',
header: {
left: 'prev,next today',
center: 'title',
right: 'timeGridSixMonth,timeGridWeek,timeGridDay,listSixMonth'
},
buttonText: {
timeGridSixMonth: '6 Month',
listSixMonth: 'List 6 Month'
},
views: {
timeGridSixMonth: {
type: 'dayGrid',
duration: { month: 6 },
titleFormat: { year: 'numeric', month: 'short', day: 'numeric' },
},
listSixMonth: {
type: 'listMonth',
duration: { month: 6 },
titleFormat: { year: 'numeric', month: 'short', day: 'numeric' } 
}
},

drop: function(info) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
console.log(info);
$.ajax({
url: '/api/plan',
type: "POST",
data: {
'title':          info.jsEvent.explicitOriginalTarget.textContent
'item_id':        $('#item_id').children("option:selected"). val(),
'start':          start,
'end':            end,
'users_id':{{ IlluminateSupportFacadesAuth ::user() -> id }},
},
success: function (response) {
console.log(response);
calendar.addEvent({
title:  response.data.title,
start:  response.data.start,
end:    response.data.end,
allDay: false,
id:     response.data.id,
});
displayMessage('gespeichert.');
}
});
},

响应为：

{
"success": true,
"data": {
"Fach": "Rhetorik",
"faecher_id": 22,
"dozenten_id": 112,
"schulungsorte_id": 18,
"Beginn": "2020-10-29T16:00:00.000000Z",
"Ende": "2020-10-29T20:00:00.000000Z",
"kurstermine_id": "14,17,7,21",
"users_id": 3,
"updated_at": "2020-04-01T16:15:34.000000Z",
"created_at": "2020-04-01T16:15:34.000000Z",
"id": 26,
"title": "Rhetorikn        Mr. Miller",
"start": "2020-10-29T16:00:00.000000Z",
"end": "2020-10-29T20:00:00.000000Z"
},
"message": "stored."
}

在自定义视图中，会创建一个没有id的事件，addEvent((不起作用。

在标准视图中，我得到一个没有id的重复事件。

你猜为什么吗？

Answer 1

已解决：

我使用eventReceive而不是drop:

eventReceive: function(info) {
console.log('eventReceive', info);
var starttime   = moment(info.event._instance.range.start).utcOffset(0).format("YYYY-MM-DD HH:mm:ss");
var endtime     = moment(info.event._instance.range.start).utcOffset(0).format("YYYY-MM-DD HH:mm:ss");
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
console.log(info);
$.ajax({
url: '/api/plan',
type: "POST",
data: {
'title':            info.draggedEl.innerText,
'item_id':      info.draggedEl.dataset.event,
'start':          starttime,
'end':            endtime,
'users_id':{{ IlluminateSupportFacadesAuth ::user() -> id }},
},
success: function (response) {
console.log(response);
info.event.setProp('title', response.data.title);
info.event.setProp('id', response.data.id);
info.event.setProp('start', response.data.start);
info.event.setProp('end', response.data.end);
}
});
},