Как связать ресурсы и события в fullcalendar, чтобы обновить его вместе в базе данных? - PullRequest
Новая
       100

Как связать ресурсы и события в fullcalendar, чтобы обновить его вместе в базе данных?

1 голос
/ 19 марта 2020

Я нахожусь в процессе разработки расписания событий с использованием ресурсов fullCalendar с перетаскиваемыми событиями. У меня есть две таблицы в базе данных 1. resources - resourceid (автоинкремент) и resourceTitle 2. События - id (автоинкремент), resourceid (пока пусто), начало, конец.

Событие обновляется в базе данных после удаления в календарь, а ресурс также сохраняется в базе данных с помощью кнопки + комната.

Теперь я застрял в том, чтобы связать их вместе и добавить в базу данных. Я не уверен, как мне обновить соответствующий идентификатор ресурса в базе данных.

Вот код:

main. js

document.addEventListener('DOMContentLoaded', function() {
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var containerEl = document.getElementById('external-events');
var calendarEl = document.getElementById('calendar');
var checkbox = document.getElementById('drop-remove');

new Draggable(containerEl, {
 itemSelector: '.fc-event',
eventData: function(eventEl) {
 return {
    title: eventEl.innerText
  };
}
 });   
 var calendar = new Calendar(calendarEl, {
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) {
        calendar.addResource({
          title: title
        });
        fetch('add_resources.php', {
  method: 'POST',
  headers: {
    'Accept': 'application/json'
  },
 body: encodeFormData({"title": title}),
})
 .then(response => console.log(response))
.catch(error => console.log(error));
      }

    }
  }
},      
editable: true,
aspectRatio: 1.5,
defaultView: 'resourceTimelineDay',
resourceLabelText: 'Rooms',
resources: 'all_resources.php',
//events: '',
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) {  
 var eventData = {
 resourceid: info.event.resourceId, 
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"),

  }; 
  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;   
}

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

add_resources. php

<?php
require 'connection.php';
$title = $_POST['title'];
$conn = DB::databaseConnection();
$conn->beginTransaction();
$sqlInsert = "INSERT INTO Resources ( resourceTitle ) VALUES ( :title )";
$stmt = $conn->prepare($sqlInsert);
$stmt->bindParam(':title', $title);
if ($stmt->execute()) {
        $conn->commit();
        return true;
    } else {
        $conn->rollback();
        return false;
    }

?>

add_event. php

<?php
require 'connection.php';
$resourceid = $_POST['resourceid'];
$title = $_POST['title'];
$start = $_POST['start'];
 $end = $_POST['end'];
 $conn = DB::databaseConnection();
   $conn->beginTransaction();
$sqlInsert = "INSERT INTO Events ( resourceid, title, start, [end]) VALUES (:resourceid, :title, :start, :end)";
$stmt = $conn->prepare($sqlInsert);
$stmt->bindParam(':resourceid', $resourceid);
$stmt->bindParam(':title', $title);
$stmt->bindParam(':start', $start);
$stmt->bindParam(':end', $end); 
if ($stmt->execute()) {
        $conn->commit();
        return true;
    } else {
        $conn->rollback();
        return false;
    }

?>

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();
 $result->bindParam(':resourceId', $resourceId);
 $alldata = array();
 while($row = $result->fetch(PDO::FETCH_ASSOC))
 {
   array_push($alldata, $row);
 }
 echo json_encode($alldata);
 ?>
...