Fullcalender V5 RefetchEvents issue

我使用的是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,
type:"POST",
data:{EventName:EventName, start:start, 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;
}
.fc-header-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">&times;</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>

这是我的其他代码：

/-----------------------加载.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();
});
});
});

虽然看起来工作量更多，但这是一个比使用全局变量更好的结构化版本。

相关内容

最新更新

热门标签：