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

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) {&nbsp;&nbsp; var confimit = confirm("Do you really want to delete?");&nbsp; if (confimit) {&nbsp; &nbsp; fetch("delete_event.php", {&nbsp; &nbsp; &nbsp; method: "POST",&nbsp; &nbsp; &nbsp; body: encodeFormData({"id": info.event.id}) });&nbsp;&nbsp; &nbsp; }&nbsp; }}删除事件.php：<?phprequire "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()) {&nbsp; &nbsp; echo true;&nbsp; &nbsp; } else {&nbsp; &nbsp; echo false;&nbsp; &nbsp;}&nbsp;?>&nbsp;