Удаление события из Fullcalendar в таблице базы данных

Question

Я использую Fullcalendar 5.1 и хочу попытаться удалить событие в fullcalendar, щелкнув по событию. Я загружаю данные из таблиц базы данных и получаю массив событий и ресурсов (например, примеры в коде комментария). Мне нужен «идентификатор события» для удаления в таблицах базы данных, и я не знаю, как это сделать («eventDelete» не определено). Спасибо за вашу помощь, если вы уже сделали то же самое.

Вот мой полный код:

document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');
      var calendar = new FullCalendar.Calendar(calendarEl,
      {
        aspectRatio: 1.8,
        scrollTime: '00:00',
        locale : 'fr',
        headerToolbar: {
          left: 'today prev next',
          center: 'title',
          right: 'resourceTimelineDay,timeGridWeek,dayGridMonth'
        },
        firstDay : 1,
        buttonText: {
          today: 'Aujourd\'hui',
          month: 'Mois',
          week: 'Semaine',
          list: 'Liste'
        },
        initialView: 'resourceTimelineDay',
        resourceAreaWidth: '30%',
        resourceAreaColumns:[ {
            headerContent: 'Ressources',
            field: 'title'
          }
        ],
        resources:
        /*  resources: [
            { id: 'a', title: 'Auditorium A', occupancy: 40 },
            { id: 'b', title: 'Auditorium B', occupancy: 40, eventColor: 'green' },
            { id: 'c', title: 'Auditorium C', occupancy: 40, eventColor: 'orange' },
            { id: 'd', title: 'Auditorium D', occupancy: 40, children: [
              { id: 'd1', title: 'Room D1', occupancy: 10 },
              { id: 'd2', title: 'Room D2', occupancy: 10 }
            ] }
          ] */
        {
           url: '../api/calendar/resources.php',
           method: 'POST'
        },
        events:
        /* events:
        [
          { id: '1', resourceId: 'b', start: '2020-06-07T02:00:00', end: '2020-06-07T07:00:00', title: 'event 1' },
          { id: '2', resourceId: 'c', start: '2020-06-07T05:00:00', end: '2020-06-07T22:00:00', title: 'event 2' },
          { id: '3', resourceId: 'd', start: '2020-06-06', end: '2020-06-08', title: 'event 3' }
        ] */
        {
            url: '../api/calendar/event.php',
            method: 'POST'
         },
         editable: true,
         selectable: true,
         eventClick: function (info) {
            var deleteMsg = confirm("Voulez-vous vraiment supprimer cette activité ?");
            if (deleteMsg) {
              var eventDelete= $('#event_id').val() ;
              var event = calendar.getEventById(eventDelete);
              // Remove event from fullcalendar
              info.event.remove();
              // Call ajax to remove event in database table
                $.ajax({
                    type: "POST",
                    url: '../api/calendar/deleteEvent.php',
                    dataType: 'json',
                    encode: true,
                    data: {'id': eventDelete},
                    success: function (response) {
                        console.log(response);
                        if(parseInt(response) > 0) {
                            $('#calendar').fullCalendar('removeEvents', event.id);
                            displayMessage("Suprression effectuée");
                        }
                      }
                });
              }
            }
          });
          calendar.render();
        });

Удаляет событие из Fullcalendar, но не из базы данных, так как «удаление события» не определено.

Answer 1

Я решил свою проблему с помощью этого кода:

eventClick: function (info) {
            var deleteMsg = confirm("Voulez-vous vraiment supprimer cette activité ?");
            if (deleteMsg) {
              // Get event ID
              var vEventId = info.event.id;
              // Remove event from fullcalendar
              info.event.remove();
              // Call ajax to remove event from database table
              var data1 = {
                        eventId: vEventId};
              $.ajax({
                url: '../api/calendar/deleteEvent.php',
                dataType: 'text',
                method: "POST",
                data : {data: JSON.stringify(data1)},
                success: function(data, status, xhr){
                    console.log(data);
                    console.log(data1);
                    console.log( JSON.stringify(data1));
                },
                error: function(xhr, status, error){
                    console.log(error);
                    console.log(xhr.responseText);
                }
              });
            }
          }
        });

document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');
      var calendar = new FullCalendar.Calendar(calendarEl,
      {
        aspectRatio: 1.8,
        scrollTime: '00:00',
        locale : 'fr',
        headerToolbar: {
          left: 'today prev next',
          center: 'title',
          right: 'resourceTimelineDay,timeGridWeek,dayGridMonth'
        },
        firstDay : 1,
        buttonText: {
          today: 'Aujourd\'hui',
          month: 'Mois',
          week: 'Semaine',
          list: 'Liste'
        },
        initialView: 'resourceTimelineDay',
        resourceAreaWidth: '30%',
        resourceAreaColumns:[ {
            headerContent: 'Ressources',
            field: 'title'
          }
        ],
        resources:
        /*  resources: [
            { id: 'a', title: 'Auditorium A', occupancy: 40 },
            { id: 'b', title: 'Auditorium B', occupancy: 40, eventColor: 'green' },
            { id: 'c', title: 'Auditorium C', occupancy: 40, eventColor: 'orange' },
            { id: 'd', title: 'Auditorium D', occupancy: 40, children: [
              { id: 'd1', title: 'Room D1', occupancy: 10 },
              { id: 'd2', title: 'Room D2', occupancy: 10 }
            ] }
          ] */
        {
           url: '../api/calendar/resources.php',
           method: 'POST'
        },
        events:
        /* events:
        [
          { id: '1', resourceId: 'b', start: '2020-06-07T02:00:00', end: '2020-06-07T07:00:00', title: 'event 1' },
          { id: '2', resourceId: 'c', start: '2020-06-07T05:00:00', end: '2020-06-07T22:00:00', title: 'event 2' },
          { id: '3', resourceId: 'd', start: '2020-06-06', end: '2020-06-08', title: 'event 3' }
        ] */
        {
            url: '../api/calendar/event.php',
            method: 'POST'
         },
         editable: true,
         selectable: true,
         eventClick: function (info) {
            var deleteMsg = confirm("Voulez-vous vraiment supprimer cette activité ?");
            if (deleteMsg) {
              var eventDelete= $('#event_id').val() ;
              var event = calendar.getEventById(eventDelete);
              // Remove event from fullcalendar
              info.event.remove();
              // Call ajax to remove event in database table
                $.ajax({
                    type: "POST",
                    url: '../api/calendar/deleteEvent.php',
                    dataType: 'json',
                    encode: true,
                    data: {'id': eventDelete},
                    success: function (response) {
                        console.log(response);
                        if(parseInt(response) > 0) {
                            $('#calendar').fullCalendar('removeEvents', event.id);
                            displayMessage("Suprression effectuée");
                        }
                      }
                });
              }
            }
          });
          calendar.render();
        });

С помощью deleteEvent. php файл:

<?php

require_once __DIR__ . '/../DataBaseManager.php';
require_once __DIR__ . '/../manager/ActivityManager.php';

//header('Content-type: application/json');

$json = json_decode($_POST['data'], true);
$error = new ArrayObject();

// Recuperation de l'activite a Supprimer
if (empty($json['eventId']) == false) {

  // Connexion BDD
  $manager = new DatabaseManager();
  $activityManager = new ActivityManager($manager);

  $result = $activityManager->deleteActivity($json['eventId']);

  if($result == "ok"){
      http_response_code(200);
      die();
  }
  else{
    http_response_code(402);
    echo json_encode($result);
    die();
  }
}

 ?>