Как перевести ресурсы и события из базы данных в полный календарь? - PullRequest
Новая
       16

Как перевести ресурсы и события из базы данных в полный календарь?

0 голосов
/ 03 апреля 2020

Я занимаюсь разработкой полного календаря с колонкой ресурсов и перетаскиваемыми событиями. Я застрял при отображении ресурсов и событий из базы данных в календаре.

Данные могут быть успешно извлечены, как я вижу на вкладке ответа в массиве, но они вообще не отображаются в календаре. Кажется, что даже интерфейс не работает полностью, так как при добавлении ресурса он даже не отображается временно. Файлы вызывают на вкладках сети, и я вижу правильные результаты на вкладке ответа, так что я предполагаю, что это не работает дисплей, возможно, я не установил надлежащие плагины или что-то в этом роде. Можете ли вы проверить, что не так? На этом сайте было несколько похожих вопросов, но, похоже, у всех были разные проблемы. Я также могу опубликовать другие связанные файлы, дайте мне знать, если вы хотели бы видеть. Вот код: 


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

1 Ответ

1 голос
/ 07 апреля 2020

Данные вашего ресурса не в формате, указанном fullCalendar. Имена полей, которые вы вводите в JSON, должны быть в точности , как указано в документации по синтаксическому анализу ресурса - например, id для идентификатора ресурса, title для заголовка и т. Д. c. Если вы этого не сделаете, fullCalendar не сможет понять данные и не отобразит ресурсы.

Чтобы изменить код на стороне сервера, чтобы добиться этого, у вас есть два варианта:

1) изменить имена столбцов вашей базы данных в вашей таблице resources в соответствии с требованиями 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);
?>
...