如何从 fullCalendar 的数据库中获取可拖动的事件区域？

Question

我一直致力于开发带有资源列的 fullCalendar 拖放事件。现在，我已经对可拖动事件区域进行了硬编码；现在试图从数据库中获取它。该数据库以前有两个 table——资源和事件。事件拖放到日历上后，会在事件 table 中更新。正在从数据库中获取资源列，为了添加新资源，我构建了一个房间按钮，用于将新资源保存在资源 table 中。到目前为止，我在主文件中只有五个可拖动事件，但现在我也在努力从数据库中获取这些事件。因此，我在名为 draggableevents 的数据库中又创建了一个 table。 table 包含两列 id 和 EventName。

代码如下：

draggableevents.php

<?php
require "connection.php";
$conn = DB::databaseConnection();
$conn->beginTransaction();
$sql = "Select * FROM DraggableEvents";
$stmt = $conn->prepare($sql);
if ($stmt->execute()) {
while($result = $stmt->fetch(PDO::FETCH_ASSOC));
return $result;
} else {
return null;
}
?>

form.php

<head>
<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 rel="stylesheet" href="css/main.css" media="all">
 <link href="main.css" rel="stylesheet">
 <script src='main.js'></script>
</head>
<?php
require 'draggableevents.php';
?>
 <div id='external-events'>
 <p>
   <strong>Draggable Events</strong>
 </p>
  <div class='fc-event'><?php $result['EventName']; ?></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>

以上代码生成了一个空白的可拖动事件区域。刷新页面时似乎没有加载 draggableevents.php 文件。我没有在网络面板中看到它，因此没有与之相关的错误。

Answer 1

有一些明显的逻辑问题，none其中与 fullCalendar 有很大关系：

1) 我之前在您之前的问题中多次提到过这一点：当您不在函数内部时，return 不会 return 值。您认为自己 return 到的确切位置在哪里？ require 没办法

2) 即使这有效，您也永远不会 return 任何事件，因为您的 while 循环已关闭并且不执行任何操作。

3) $result 无论如何都超出了 while 循环的范围。

4) 你永远不会执行你的查询

5) 你没有echo事件名称。

您需要将所有数据库结果放入一个数组，然后遍历该数组以生成与数组中的条目一样多的 fc-event div。

这是一种方法 - 我已将 draggableevents.php 的功能放入一个函数中，您可以在需要时调用它。

draggableevents.php

<?php
require "connection.php";

function getDraggableEvents() {
  $conn = DB::databaseConnection();
  $sql = "Select * FROM DraggableEvents";
  $stmt = $conn->prepare($sql);
  $stmt->execute();
  $results = array();
  while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
   $results[] = $row;
  }
  return $results;
}
?>

form.php

<html>
<head>
  <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 rel="stylesheet" href="css/main.css" media="all">
  <link href="main.css" rel="stylesheet">
  <script src='main.js'></script>
</head>
<body>
  <div id='external-events'>
    <p>
      <strong>Draggable Events</strong>
    </p>

    <?php
    require 'draggableevents.php';
    $events = getDraggableEvents();
    foreach ($events as $event)
    {
    ?>
      <div class='fc-event'><?php echo $event['EventName']; ?></div>
    <?php
    }
    ?>

    <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>
</body>
</html>

如何从 fullCalendar 的数据库中获取可拖动的事件区域？

How to fetch draggable events area from the database in fullCalendar?

html

php

fullcalendar

fullcalendar-4