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

Question

我正在开发带有资源列的拖放事件 fullcalendar。我能够在日历上拖放事件并将其保存到数据库中。对于资源列，我有一个添加房间按钮，允许用户添加也保存在数据库中的房间。资源和事件正在成功获取并显示在日历上。现在，我正在开发相同的删除功能。现在，我坚持使用双击删除事件。这是代码：主程序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;  }},

Answer 1

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

1) 使用 fetch() 而不是 $.ajax，那么您将不会收到任何关于缺少 jQuery 的错误消息。确保将事件 ID 放入请求正文中。

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

3)$stmt->fetch从您的 PHP 中删除命令 - SQLDELETE操作不返回任何结果，因此没有可获取的内容。我还删除了无意义的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}) }); 

    }

  }

}

删除事件.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;

   }

 ?>