How to delete an event from fullcalendar on button click?

1 answer

I'm in the middle of developing a drag and drop event fullcalendar with a resource column. I'm able to drag and drop events on the calendar and save it to the database. For the resource column, I have an add room button that allows users to add the room which also gets saved in the database. The resources and events are successfully being fetched and displayed on the calendar. Now, I'm working on developing the delete functionality for the same. For now, I'm stuck at deleting the events using a double click.

Here's the code:


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=" +,                 success: function (response) {                      if(parseInt(response) > 0) {                         $('#calendar').fullCalendar('removeEvents',;                         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 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;    }  ?>  

When I'm trying to delete an event using the above code, I double click on the event, I see the message asking if I really want to delete the event, but it doesn't really get deleted. I don't see the delete_event.php being called in the network panel. The console has the error "ReferenceError: $ is not defined". I'm not sure what is wrong in the code above.

All answers to this question, which has the identifier 61211822

The best answer:

You need to make a few modifications to your code.

1) use fetch() instead of $.ajax, then you won't get any error messages about jQuery being missing. Ensure you put the event ID into the body of the request.

2) use the fullCalendar v4 syntax for eventClick, instead of v3 - see

3) Remove the $stmt->fetch command from your PHP - a SQL DELETE operation doesn't return any results, so there is nothing to fetch. I also removed the meaningless return statements, because you're not inside a function, and your script doesn't have any further code which needs to be prevented from executing.


eventClick: function (info) {    var confimit = confirm("Do you really want to delete?");   if (confimit) {     fetch("delete_event.php", {       method: "POST",       body: encodeFormData({"id":}) });      }   } } 


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

Last questions

how do i remove the switch on my home screen?
how to edit the JS date and time to update atuomatically?
How to utilize data stored in a multidimensional array
Powermockito not mocking URL constructor in URI.toURL() method
Android Bluetooth LE Scanner only scans when phone's Location is turned on in some devices
docker wordpress container can't connect to mysql container
How can I declare a number in java that is more than 64-bits? [duplicate]
Optaplanner solutionClass entityCollectionProperty should never return null error when simple JSON object passed to controller
Anylogic, get the time a pedestrain is in a queue
How do I fix this syntax issue with my .flex file?
Optimizing query in PHP
How to find the highest number of a column and print two columns of that row in R?
Ideas on “Error: Type is referenced as an interface from”?
JCIFS SmbFile.exists() and SmbFile.isDirectory() return false when it exists and I can listFiles()
PHP total order
Laravel booking system design
neural net - undefined column selected
How to indicate y axis does not start from 0 in ggplot?
Fragments in backStack
Spinner how to change the data