Как удалить событие из полного календаря по нажатию кнопки? - PullRequest
Новая
       10

Как удалить событие из полного календаря по нажатию кнопки?

0 голосов
/ 14 апреля 2020

Я нахожусь в процессе разработки полного календаря событий перетаскивания с помощью столбца ресурсов. Я могу перетаскивать события в календаре и сохранять их в базе данных. Для столбца ресурсов у меня есть кнопка «Добавить комнату», которая позволяет пользователям добавлять комнату, которая также сохраняется в базе данных. Ресурсы и события успешно извлекаются и отображаются в календаре. Сейчас я работаю над разработкой функции удаления для того же. На данный момент я застрял в удалении событий с помощью двойного щелчка.

Вот код:

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: $ не определено». Я не уверен, что не так в коде выше.

1 Ответ

1 голос
/ 15 апреля 2020

Вам нужно внести несколько изменений в ваш код.

1) использовать fetch () вместо $. ajax, тогда вы не получите никаких сообщений об отсутствии jQuery. Убедитесь, что вы указали идентификатор события в теле запроса.

2) используйте синтаксис fullCalendar v4 для eventClick вместо v3 - см. https://fullcalendar.io/docs/eventClick.

3) Удалите команду $stmt->fetch из вашей PHP - операция SQL DELETE не вернет никаких результатов, поэтому ничего не нужно извлечь. Я также удалил бессмысленные операторы 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;
   }
 ?>
...