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

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

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

Я работал над созданием событий перетаскивания fullCalendar со столбцом ресурса. На данный момент я жестко закодировал область перетаскиваемых событий; сейчас пытаюсь получить его из базы данных. База данных ранее имела две таблицы - Ресурсы и События. События после удаления в календаре обновляются в таблице событий. Столбец ресурсов выбирается из базы данных, и для добавления новых ресурсов я создал кнопку комнат, которая сохраняет новые ресурсы в таблице ресурсов. До сих пор у меня было только пять перетаскиваемых событий в главном файле, но сейчас я также работаю над их извлечением из базы данных. Итак, я создал еще одну таблицу в базе данных с именем draggableevents. Таблица содержит два столбца 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;
}
?>

форма. 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 не загружается при обновлении страницы. Я не вижу его на сетевой панели и, следовательно, нет ошибок, связанных с ним.

1 Ответ

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

Есть несколько очевидных логических проблем, ни одна из которых не имеет ничего общего с fullCalendar:

1) Я уже упоминал об этом несколько раз ранее в ваших предыдущих вопросах: return не возвращает значение, когда вы не внутри функции. Как вы думаете, куда вы возвращаете это в , точно? require не имеет никакого способа

2), даже если бы это сработало, вы никогда не вернете никаких событий, потому что ваш while l oop закрыт и ничего не делает.

3) $result будет вне зоны вашего внимания, пока l oop в любом случае.

4) Вы никогда не выполняете свой запрос

5) Вы не echo назвали событие.

Вам нужно получить все результаты вашей базы данных в массив, а затем l oop через этот массив, чтобы сгенерировать столько fc-event делений, сколько есть записей в массиве.

Вот один из способов сделать это - я добавил функциональность 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;
}
?>

форма. 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>
...