Javascript 如何将fullcalendar中的资源和事件关联起来,以便在数据库中一起更新?
我正在使用可拖动事件的完整日历资源开发事件日程安排。数据库中有两个表 1.资源-资源ID(自动增量)和资源标题 2.事件-id(自动增量)、resourceid(现在允许为空)、开始、结束 事件在日历上删除后会在数据库中更新,资源也会使用+房间按钮保存在数据库中 现在,我一直在将它们绑定在一起并将它们添加到数据库中。我不确定如何使用数据库中的事件更新相应的resourceid 代码如下: main.jsJavascript 如何将fullcalendar中的资源和事件关联起来,以便在数据库中一起更新?,javascript,php,sql-server,fullcalendar,fullcalendar-scheduler,Javascript,Php,Sql Server,Fullcalendar,Fullcalendar Scheduler,我正在使用可拖动事件的完整日历资源开发事件日程安排。数据库中有两个表 1.资源-资源ID(自动增量)和资源标题 2.事件-id(自动增量)、resourceid(现在允许为空)、开始、结束 事件在日历上删除后会在数据库中更新,资源也会使用+房间按钮保存在数据库中 现在,我一直在将它们绑定在一起并将它们添加到数据库中。我不确定如何使用数据库中的事件更新相应的resourceid 代码如下: main.js document.addEventListener('DOMContentLoaded',
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>
可拖动事件
我的活动1
我的活动2
我的活动3
我的活动4
我的活动5
落下后取出
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;
}
?>
<?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);
?>
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';
$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;
}
?>
<?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);
?>
评论不用于扩展讨论;此对话已结束。评论不用于扩展讨论;这段对话已经结束。