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

Question

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

代码如下:

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;
 };

删除事件.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 命令 - SQL DELETE 操作不会返回任何结果，因此没有任何内容可获取。我还删除了无意义的 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;
   }
 ?>