问题描述
我正在使用Fullcalender Scheduler V5。 我添加了calendar.refetchEvents（）;在eventDrop，eventResize，eventClick的末尾。运行良好。但是当我在其他函数中使用它添加/编辑事件时，它不起作用。这是我的代码：
<!DOCTYPE html>
<html>
<head>
<Meta charset='utf-8' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src='moment-timezone.js'></script>
<script src='lib/locales-all.js'></script>
<link href='fullcalender_scheduler/main.css' rel='stylesheet' />
<script src='fullcalender_scheduler/main.js'></script>
<script src='fullcalender_scheduler/ja.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded',function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl,{
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',eventTimeFormat: { hour: 'numeric',minute: '2-digit' },businessHours: true,height: '100%',aspectRatio: 1.8,editable: true,// enable draggable events
Now: new Date(),scrollTime: '00:00',// undo default 6am scrollTime
headerToolbar: {
left: 'today prev,next',center: 'title',right: 'resourceTimelineDay,resourceTimelineTenDays,timeGridWeek,dayGridMonth,listWeek'
},initialView: 'resourceTimelineDay',views: {
resourceTimelineTenDays: {
type: 'resourceTimeline',duration: { days: 10 },buttonText: '10 days'
}
},expandRows: true,resourceAreaWidth: '10%',resourceAreaHeaderContent: 'Rooms',resourceOrder: 'type1',// to set the displayorder of resources
resources: [
{ id: '1',title: 'R1',eventColor: 'blue',type1:10},{ id: '2',title: 'R2',eventColor: 'green',type1:13 },{ id: '3',title: 'R3',eventColor: '#F39C12',type1:14 },{ id: '4',title: 'R4',eventColor: 'red',type1:11 },{ id: '5',title: 'R5',eventColor: '#8E44AD',type1:12 },],events :'load.PHP',selectable:true,selectHelper:true,//---------------------------ADD EVENTS----------------------------------------///
select: function(info) {
var st_time = info.startStr;
var start =st_time.split("T").join(" ");
var end_time = info.endStr;
var end =end_time.split("T").join(" ");
var resourc =info.event._def.resourceIds;
var resourceId = resourc.toString();
$('#ModalAdd').modal('show');
$('#ModalAdd #Room').val(resourceId);
$('#ModalAdd #start').val(start);
$('#ModalAdd #end').val(end);
},eventResize:function(info)
{
var resourc =info.event._def.resourceIds;
var resourceId = resourc.toString();
var title = info.event.title;
var start =info.event.start;
var end =info.event.end;
var id = info.event.id;
var scriptUrl = "DragEvent.PHP";
$.ajax({
url:scriptUrl,type:"POST",data:{title:title,start:start,end:end,id:id,resourceId:resourceId},success: function(data){
alert('Event updated');
calendar.refetchEvents();---------Here,its working well
}
})
},});
calendar.render();
});
function saveData()
{
var Room= document.getElementById("Room").value;
var EventName= document.getElementById("EventName").value;
var start=document.getElementById("start").value;
var end=document.getElementById("end").value;
var ScriptUrl="addEvent.PHP";
$.ajax({
url:ScriptUrl,data:{EventName:EventName,end:end},success: function(data){
alert("Added successfully");
// calendar.refetchEvents();-----------------------tried here. Not working
}
});
$('#ModalAdd').modal('hide');
calendar.refetchEvents();----------Here also,Not working
}
</script>
<style>
html,body {
overflow: hidden; /* don't do scrollbars */
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 14px;
}
#calendar-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.f@R_791_4049@-toolbar {
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
}
</style>
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="ModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="pages/calenderpages/addEvent.PHP" name="add_item" id ="add_item">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><b>Add events</b></h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="hidden" name="Room" class="form-control" id="Room" value="">
<label for="genryo" class="col-sm-4 control-label">Event name</label>
<div class="col-sm-8">
<input type="text" name="EventName" class="form-control" id="EventName" value="">
</div>
</div>
<div class="form-group">
<label for="start" class="col-sm-4 control-label">Start</label>
<div class="col-sm-8">
<input type="text" name="start" class="form-control" id="start" readonly>
</div>
</div>
<div class="form-group">
<label for="end" class="col-sm-4 control-label">End</label>
<div class="col-sm-8">
<input type="text" name="end" class="form-control" id="end" readonly>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn btn-primary" onclick="saveData()">SAVE</button>
</div>
</form>
</div>
</div>
</div>
<!------------------------------------------>
<div id='calendar-container'>
<div id='calendar'></div>
</div>
</body>
</html>
这是我的其他代码：
/ ----------------------- Load.PHP -------------------- ---------- //
<?PHP
require_once('../../common/conn_check.PHP');
require_once('../../common/common.PHP');
$data=array();
$query ="SELECT * FROM event_schedule ";
$statement = pg_query($conn,$query);
$result = pg_fetch_all($statement);
foreach($result as $row)
{
$data[] = array(
'id' => $row["id"],'resourceId' => $row["Room"],'title' =>$row["EventName"],'start' => $row["StartTime"],'end' => $row["EndTime"]
);
}
echo json_encode($data);
?>
/---------------AddEvents.PHP-------------------//
<?PHP
require_once('../../common/conn_check.PHP');//for using the MysqL connection
require_once('../../common/common.PHP');//common function
if (isset($_POST['start']) && isset($_POST['end'])){
$EventName = $_POST['EventName'];
$Room = $_POST['Room'];
$start = $_POST['start'];
$end = $_POST['end'];
$sql="INSERT INTO event_schedule
(Room,EventName,StartTime,EndTime)
VALUES
('$EventName','$Room','$start','$end')";
$result = pg_query($conn,$sql);
echo json_encode(array('success'=>true));
}
?>
我已经尝试了好几个星期，因此我失去了信心。作为一个初学者，我不知道出了什么问题。有人，请帮忙。
解决方法
这里最简单的选择是将calendar设置为全局，以便在所有范围内均可访问。
例如
<script>
var calendar; //global variable
document.addEventListener('DOMContentLoaded',function() {
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl,{ //don't re-declare it here,just assign it
///...etc
但是全局变量通常不是最佳实践-如果您不小心，可能会导致其他问题。因此，另一个选择是停止使用嵌入式事件处理程序来触发saveData，而是在DOMContentLoaded块内添加事件处理程序，当然calendar已经在范围内。您使saveData从AJAX调用返回一个Promise，然后在事件处理程序中向其附加一个.done()回调，然后在其中调用refetchEvents。
因此在此版本中，您的按钮将变为
<button type="button" class="btn btn-primary" id="savedata">SAVE</button>
和saveData（）将变为：
function saveData()
{
var Room = document.getElementById("Room").value;
var EventName = document.getElementById("EventName").value;
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var promise = $.ajax({
url: "addEvent.php",type:"POST",data:{ EventName: EventName,start:start,end: end },});
$('#ModalAdd').modal('hide');
return promise;
}
最后在DOMContentLoaded区域：
document.addEventListener('DOMContentLoaded',function() {
//....everything which is already there....and then...
$("#savedata").click(function() {
var promise = saveData();
promise.done(function(data) {
calendar.refetchEvents();
});
});
});
尽管看起来需要更多工作，但它的结构化版本比使用全局变量要好得多。