Javascript 如何将资源和事件从数据库显示到fullcalendar？

我一直在开发一个完整的日历，其中有一个资源栏和可拖动的事件。我一直在日历上显示数据库中的资源和事件

数据可以成功获取，正如我在数组中的response选项卡中看到的那样，但它根本没有显示在日历上。即使前端似乎也不能完全工作，因为在添加资源时，它甚至不能临时显示。这些文件在网络选项卡中被调用，我可以在响应选项卡中看到正确的结果，所以我猜是显示不起作用，可能是我没有安装正确的插件或其他东西。你能检查一下有什么问题吗？ 在这个网站上有一些类似的问题，但每个人似乎都有不同的问题。我也可以发布其他相关文件，如果你想看，请告诉我。 代码如下：

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

form.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>

all_resources.php        

    <?php
     require 'connection.php';
      $conn = DB::databaseConnection();
      $json = array();
     $sql = "SELECT * FROM resources ORDER BY resourceId";
     $result = $conn->prepare($sql);
     $result->execute();
      $alldata = array();
       while($row = $result->fetch(PDO::FETCH_ASSOC))
     {
      array_push($alldata, $row);
     }
     echo json_encode($alldata);
      ?> ``` 

   all_events.php

   <?php
   require 'connection.php';
   $conn = DB::databaseConnection();
   $json = array();
   $sql = "SELECT * FROM Events ORDER BY id";
   $result = $conn->prepare($sql);
   $result->execute();
   $alldata = array();
   while($row = $result->fetch(PDO::FETCH_ASSOC))
   {
     array_push($alldata, $row);
   }
   echo json_encode($alldata);
    ?>

all_events.php

的响应如下所示：

[
  {"resourceId":"104","resourceTitle":"TESET"},
  {"resourceId":"105","resourceTitle":"AA"},
  {"resourceId":"106","resourceTitle":"HM"},
  {"resourceId":"107","resourceTitle":"TEST"}
]

[
  {"id":"65","resourceId":"104","title":"My Event 1","start":"2020-04-06","end":"2020-04-06"},
  {"id":"66","resourceId":"105","title":"My Event 1","start":"2020-04-06","end":"2020-04-06"}
]

---

您的资源数据不是fullCalendar指定的格式。您在JSON中提供的字段名必须与-例如资源id的

id

、标题的

title

等中所述的字段名完全相同。如果不这样做，fullCalendar将无法理解数据，也不会显示资源

要修改服务器端代码以实现此目的，您有两个选项：

1） 更改

resources

表中的数据库列名，以符合fullCalendar的要求。因此，您将

resourceId

更改为

id

，

resourceititle

更改为

title

。这应该足够了，并且不需要对PHP代码进行任何更改

或

2） 更改

all_resources.php

php代码，使其为每个数据行生成一个新数组，该数组包含相同的数据，但具有不同的属性名称，以便这些名称将在JSON中编码，而不是数据库中的列名：

<?php
require 'connection.php';
$conn = DB::databaseConnection();
$json = array();
$sql = "SELECT * FROM resources ORDER BY resourceId";
$result = $conn->prepare($sql);
$result->execute();
$alldata = array();
while($row = $result->fetch(PDO::FETCH_ASSOC))
{
  $resource = array(
    "id" => $row["resourceId"],
    "title" => $row["resourceTitle"]
  );
  array_push($alldata, $resource);
}

echo json_encode($alldata);
?>

---

您的资源数据不是fullCalendar指定的格式。您在JSON中提供的字段名必须与-例如资源id的

id

、标题的

title

等中所述的字段名完全相同。如果不这样做，fullCalendar将无法理解数据，也不会显示资源

要修改服务器端代码以实现此目的，您有两个选项：

1） 更改

resources

表中的数据库列名，以符合fullCalendar的要求。因此，您将

resourceId

更改为

id

，

resourceititle

更改为

title

。这应该足够了，并且不需要对PHP代码进行任何更改

或

2） 更改

all_resources.php

php代码，使其为每个数据行生成一个新数组，该数组包含相同的数据，但具有不同的属性名称，以便这些名称将在JSON中编码，而不是数据库中的列名：

<?php
require 'connection.php';
$conn = DB::databaseConnection();
$json = array();
$sql = "SELECT * FROM resources ORDER BY resourceId";
$result = $conn->prepare($sql);
$result->execute();
$alldata = array();
while($row = $result->fetch(PDO::FETCH_ASSOC))
{
  $resource = array(
    "id" => $row["resourceId"],
    "title" => $row["resourceTitle"]
  );
  array_push($alldata, $resource);
}

echo json_encode($alldata);
?>

“我可以在阵列的响应选项卡中看到它”…请向我们展示它的外观。如果您提供的数据在某种程度上无效，fullCalendar可能并不总是显示错误，但它会忽略错误。因此，当我刷新页面时，会在网络面板中加载all_resources.php和all_events.php。对于all_resources.php，响应如下-{“JSON”：[{“resourceId”：“104”，“resourceTitle”：“TESET”}，{“resourceId”：“105”，“resourceTitle”：“AA”}，{“resourceId”：“106”，“resourceTitle”：“HM”}，{“resourceId”：“107”，“resourceTitle”：“TEST”}]，所有事件的响应也是如此。如果有任何其他方式我可以向您显示响应，请告诉我：

{“JSON”：[{“resourceId”：“104”，“resourceTitle”：“TESET”}，{“resourceId”：“105”，“resourceTitle”：“AA”}，{“resourceId”：“106”，“resourceTitle”：“HM”}，{“resourceId”：“107”，“resourceTitle”：“TEST”}

{“JSON”：bit是主要问题。在资源和事件的情况下，您必须只返回一个数组，而不返回任何其他内容。如果您将其包装在这样的对象中，fullCalendar不知道在对象中的何处查找数据。其次，您的资源对象不符合fullCalendar规定的规范。属性名称不符合不匹配。请阅读。它要求您为属性使用什么名称？为什么不使用它们？毕竟您已经看过演示等中的所有示例，即使您以前从未阅读过该页面。您认为fullCalendar可以猜出您的随机属性名称中哪些应该是ID，哪些是标题，哪些是c颜色等等？？这是不符合逻辑的。计算机不能像人类那样猜测或推断……计算机不能推断

“resourceTitle”：“TESET”

实际上必须是

“title”：“TESET”

，因为“哦，它是一个资源对象，所以它一定是那样的”。它不能那样想。你还不如写

“wsjhkjhgjer”：“TESET”

。它对fullCalendar的意义与

resourceTitle

差不多。你必须精确，并坚持记录的名称。“我可以在数组中的响应选项卡中看到它。”“…请告诉我们它是什么样子。如果您提供的数据在某种程度上无效，fullCalendar可能并不总是显示错误，但它会忽略它。因此，当我刷新页面时，all_resources.php和all_events.php会加载到网络面板中。对于all_resources.php，响应如下-{“JSON”：[{“resourceId”：“104”，“resourceTitle”：“TESET”}，{“resourceId”：“105”，“resourceTitle”：“AA”}，{“resourceId”：“106”，“resourceTitle”：“HM”}，{“resourceId”：“107”，“resourceTitle”：“TEST”}，”，同样适用于all_events.php。如果有任何其他方式我可以向您显示响应，请告诉我：

{“JSON”：[{“resourceId”：“104”，“resourceTitle”：“TESET”}，{”resourceId:“105”，“resourceTitle:“AA”}，{“resourceId:“106”，“resourceTitle:“HM”}，{“resourceId:“107”，“re”