javascript - 如何将fullCalendar中的资源保存到数据库中？

Question

我正在开发一个事件调度程序，使用 fullCalendar 资源库和可拖动事件。我能够将被拖动的事件保存在数据库中。

目前，数据库只有一张表，包含三列 - id(autoincrement)、title、start、end。

我刚刚将资源列添加到日历中，日历上还有一个添加房间按钮，可让用户自己添加房间。这是我提到的构建它的内容。

对于可拖动事件:https://fullcalendar.io/docs/external-dragging-demo 资源:https://fullcalendar.io/docs/addResource-demo

这是我的代码:

main.js

document.addEventListener('DOMContentLoaded', function() {
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var containerEl = document.getElementById('external-events');
var calendarEl = document.getElementById('calendar');
var checkbox = document.getElementById('drop-remove');

new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
  return {
    title: eventEl.innerText
  };
}
});   
 var calendar = new Calendar(calendarEl, {
plugins: [ 'interaction', 'resourceTimeline' ],
header: {
   left: 'promptResource today prev,next',
  center: 'title',
  right: 'resourceTimelineDay,resourceTimelineWeek'
},
customButtons: {
promptResource: {
text: '+ room',
click: function() {
  var title = prompt('Room name');
   console.log(title);
  if (title) {
        calendar.addResource({
          title: title
        });
        fetch('add_resources.php', {
  method: 'POST',
  headers: {
    'Accept': 'application/json'
  },
  body: encodeFormData(title)
})
         .then(response => console.log(response))
.catch(error => console.log(error));
      }

    }
  }
},

editable: true,
aspectRatio: 1.5,
defaultView: 'resourceTimelineDay',
resourceLabelText: 'Rooms',
resources: '',
events: '',
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,
eventReceive: function(info) {


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

index.php

<link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/interaction@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link href='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/resource-common@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.min.js'></script>
<link href="main.css" rel="stylesheet">
<script src='main.js'></script>

<div id='external-events'>
  <p>
    <strong>Draggable Events</strong>
  </p>
  <div class='fc-event'>My Event 1</div>
  <div class='fc-event'>My Event 2</div>
  <div class='fc-event'>My Event 3</div>
  <div class='fc-event'>My Event 4</div>
  <div class='fc-event'>My Event 5</div>
  <p>
    <input type='checkbox' id='drop-remove' />
    <label for='drop-remove'>remove after drop</label>
  </p>
</div>
<div id='calendar-container'>
   <div id='calendar'></div>
</div>

add_resouces.php

<?php

require 'connection.php';
$title = $_POST['title'];
$conn = DB::databaseConnection();
$conn->beginTransaction();
$sqlInsert = "INSERT INTO Resources ( resourceTitle ) VALUES ( :title )";
$stmt = $conn->prepare($sqlInsert);
$stmt->bindParam(':title', $title); 
if ($stmt->execute()) {
        $conn->commit();
        return true;
    } else {
        $conn->rollback();
        return false;
    }

?>

因此，我正在为资源创建另一个表，其中包含两列 - roomId 和 roomTitle。我的问题是如何使用“+ room”按钮将 roomTitle 保存到数据库中。

目前，资源列的前端正在运行 - 即，在我通过该按钮添加房间后，房间在页面上可见。事件拖放也可以正常工作 - 将其拖放到日历上后会保存到数据库中。

Answer 1

您需要在将资源添加到日历的命令之后添加 AJAX 请求，以便将标题数据发送到 add_resources.php。

customButtons: {
  promptResource: {
    text: "+ room",
    click: function() {
      var title = prompt("Room name");
      if (title) {
        calendar.addResource({
          title: title
        });
        fetch("add_resources.php", {
          method: "POST",
          headers: {
            Accept: "application/json"
          },
          body: encodeFormData({ "title": title})
        })
          .then(response => console.log(response))
          .catch(error => console.log(error));
      }
    }
  }
},

演示:https://codepen.io/ADyson82/pen/WNNeLNV?&editable=true&editors=001