如何显示从数据库到全日历的资源和事件？

Question

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

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


   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_resources.php 的响应如下所示：

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

来自 all_events.php 的响应如下所示：

[
  {"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"}
]

Answer 1

您的资源数据不是 fullCalendar 指定的格式。您在 JSON 中提供的字段名称必须 与 resource parsing documentation 中提到的完全相同 - 例如id为资源ID，title为标题等。如果不这样做，fullCalendar无法理解数据，不会显示资源。

要修改您的 server-side 代码以实现此目的，您有两个选择：

1) 更改 resources table 中的数据库列名以匹配 fullCalendar 的要求。因此，您会将 resourceId 更改为 id，将 resourceTitle 更改为 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);
?>

如何显示从数据库到全日历的资源和事件？

How to dispaly resources and events from database to fullcalendar?

javascript

php

json

fullcalendar

fullcalendar-4