如何在单击按钮时从完整日历中删除事件

Question

我正在开发一个带有资源列的拖放事件完整日历。我可以在日历上拖放事件并将其保存到数据库中。对于资源列，我有一个添加文件室按钮，允许用户添加文件室，该文件室也保存在数据库中。资源和事件正在成功获取并显示在日历上。现在，我正在开发相同的删除功能。目前，我只能双击删除事件。

这是代码：

main.js

document.addEventListener("DOMContentLoaded", function() {
var containerEl = document.getElementById("external-events");
var checkbox = document.getElementById("drop-remove");
new FullCalendarInteraction.Draggable(containerEl, {
itemSelector: ".fc-event",
eventData: function(eventEl) {
return {
title: eventEl.innerText
};
}
});
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: "GPL-My-Project-Is-Open-Source",
plugins: ["interaction", "resourceTimeline", 'dayGrid', 'timeGrid' ],
header: {
left: "promptResource today prev,next",
center: "title",
right: 'dayGridMonth,resourceTimelineDay,resourceTimelineWeek'
},
customButtons: {
promptResource: {
text: "+ room",
click: function() {
var title = prompt("Room name");
console.log(title);
if (title) {
fetch("add_resources.php", {
method: "POST",
headers: {
'Accept': 'text/html' 
},
body: encodeFormData({"title": title}),
}) 
.then(response => response.text())
.then(response => { 
calendar.addResource({
id: response,
title: title
});
})
.catch(error => console.log(error));
}
}
}
},
editable: true,
aspectRatio: 1.5,
defaultView: "resourceTimelineDay",
resourceLabelText: "Rooms",
resources: "all_resources.php",
droppable: true,
drop: function(info) {
if (checkbox.checked) {
info.draggedEl.parentNode.removeChild(info.draggedEl);
}
},
eventLimit: true,
events: "all_events.php",
displayEventTime: false,
eventRender: function(event, element, view) {
if (event.allDay === "true") {
event.allDay = true;
} else {
event.allDay = false;
}
},

selectable: true,
selectHelper: true,
eventClick: function (info) {    
var confimit = confirm("Do you really want to delete?");
if (confimit) {             
$.ajax({
type: "POST",
url: "delete_event.php",
data: "&id=" + info.event.id,
success: function (response) {
if(parseInt(response) > 0) {
$('#calendar').fullCalendar('removeEvents', info.event.id);
displayMessage("Deleted Successfully");
}
}
});
}
},
eventReceive: function(info) {
console.log(calendar.getResources());
console.log(info.event);
var eventData = {
title: info.event.title,
start: moment(info.event.start).format("YYYY-MM-DD HH:mm"),
end: moment(info.event.start).format("YYYY-MM-DD HH:mm"),
resourceid: info.event._def.resourceIds[0]
};
console.log(eventData);
//send the data via an AJAX POST request, and log any response which comes from the server
fetch("add_event.php", {
method: "POST",
headers: {
Accept: "application/json"
},
body: encodeFormData(eventData)
})
.then(response => console.log(response))
.catch(error => console.log(error));    
}        
});
calendar.render();
});
const encodeFormData = data => {
var form_data = new FormData();
for (var key in data) {
form_data.append(key, data[key]);
}
return form_data;
};

delete_event.php

<?php
require "connection.php";
$id = $_POST['id'];
$conn = DB::databaseConnection();
$sql = "DELETE FROM Events WHERE id = :id";
$stmt = $conn->prepare($sql);
$stmt->bindParam(':id', $id);
if ($stmt->execute()) {
return $stmt->fetch(PDO::FETCH_ASSOC);
} else {
return null;
}
?> 

当我试图使用上面的代码删除一个事件时，我双击该事件，我会看到一条消息，询问我是否真的想删除该事件，但它并没有真正被删除。我看不到在网络面板中调用delete_event.php。控制台出现错误"ReferenceError:$未定义"。我不确定上面的代码出了什么问题。

Answer 1

您需要对代码进行一些修改。

1( 使用fetch((而不是$.ajax，这样就不会得到任何关于jQuery丢失的错误消息。请确保将事件ID放入请求的正文中。

2( 对eventClick使用fullCalendar v4语法，而不是v3-请参阅https://fullcalendar.io/docs/eventClick.

3( 从PHP中删除$stmt->fetch命令-SQLDELETE操作不会返回任何结果，因此没有任何可获取的内容。我还删除了无意义的return语句，因为您不在函数内部，并且您的脚本没有任何需要阻止执行的进一步代码。

eventClick:

eventClick: function (info) { 
var confimit = confirm("Do you really want to delete?");
if (confimit) {
fetch("delete_event.php", {
method: "POST",
body: encodeFormData({"id": info.event.id}) }); 
}
}
}

delete_event.php：

<?php
require "connection.php";
$id = $_POST['id'];
$conn = DB::databaseConnection();
$sql = "DELETE FROM Events WHERE id = :id";
$stmt = $conn->prepare($sql);
$stmt->bindParam(':id', $id);
if ($stmt->execute()) {
echo true;
} else {
echo false;
}
?>