如何在单击按钮时从全日历中删除事件?
How to delete an event from fullcalendar on button click?
我正在开发带有资源栏的拖放事件全日历。我能够在日历上拖放事件并将其保存到数据库中。对于资源列,我有一个添加房间按钮,允许用户添加也保存在数据库中的房间。资源和事件正在成功获取并显示在日历上。
现在,我正在开发相同的删除功能。现在,我坚持使用双击删除事件。
代码如下:
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: $ is not defined"。我不确定上面的代码有什么问题。
您需要对代码进行一些修改。
1) 使用 fetch() 而不是 $.ajax,那么您将不会收到任何有关 jQuery 丢失的错误消息。确保将事件 ID 放入请求正文中。
2) 对 eventClick
使用 fullCalendar v4 语法,而不是 v3 - 请参阅 https://fullcalendar.io/docs/eventClick.
3) 从 PHP 中删除 $stmt->fetch
命令 - SQL DELETE
操作没有 return 任何结果,因此没有任何结果获取。我还删除了无意义的 return
语句,因为您不在函数内部,并且您的脚本没有任何需要阻止执行的进一步代码。
事件点击:
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;
}
?>
我正在开发带有资源栏的拖放事件全日历。我能够在日历上拖放事件并将其保存到数据库中。对于资源列,我有一个添加房间按钮,允许用户添加也保存在数据库中的房间。资源和事件正在成功获取并显示在日历上。 现在,我正在开发相同的删除功能。现在,我坚持使用双击删除事件。
代码如下:
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: $ is not defined"。我不确定上面的代码有什么问题。
您需要对代码进行一些修改。
1) 使用 fetch() 而不是 $.ajax,那么您将不会收到任何有关 jQuery 丢失的错误消息。确保将事件 ID 放入请求正文中。
2) 对 eventClick
使用 fullCalendar v4 语法,而不是 v3 - 请参阅 https://fullcalendar.io/docs/eventClick.
3) 从 PHP 中删除 $stmt->fetch
命令 - SQL DELETE
操作没有 return 任何结果,因此没有任何结果获取。我还删除了无意义的 return
语句,因为您不在函数内部,并且您的脚本没有任何需要阻止执行的进一步代码。
事件点击:
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;
}
?>