当我添加新事件或更新事件或更改事件或拖动新时间或新用户时,每次页面都会刷新。但是如何在不重新加载页面并显示更新的事件时间或删除事件的情况下解决此问题。我将日历版本 5 用于全日历。
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
now: '<?php echo $CurrentDate; ?>',
editable: true,
aspectRatio: 1.8,
scrollTime: '00:00',
timeFormat: 'H(:mm)',
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'resourceTimelineDay,timeGridWeek,dayGridMonth'
},
resources: <?php eventGroups(); ?>,
events: function(info, successCallback, failureCallback) {
successCallback(<?php eventGroupsDetails($fromDate,$toDate); ?>)
},
dateClick: function(info) {
$('#addScheduleEntry').modal('show');
$(document).on('click', '.modal_default_ok', function() {
$.ajax({
url: "calendar_event_create.php",
type: "POST",
data: $("#frmEvent").serialize(),
dataType: 'json',
success: function(response){
if(response.result == 'success'){
// how to get updated event and display in calender without page refresh
}
}
});
});
},
eventClick: function(info, jsEvent, view) {
$.ajax({
url: "calendar_event_update.php",
type: "POST",
data: $("#frmEventUpdate").serialize(),
dataType: 'json',
success: function(response){
// how to get updated event and display in calender without page refresh
}
});
},
editable: true,
eventDrop: function(info, delta, revertFunc, ui) {
$.ajax({
url: "save_drop_event_detail.php",
type: "POST",
data: {EventId:EventId},
dataType: 'json',
success: function(response){
// how to get updated event and display in calender without page refresh
}
});
},
eventResize: function(info) {
$.ajax({
url: "save_resize_event_detail.php",
type: "POST",
data: {EventId:EventId},
dataType: 'json',
success: function(response){
// how to get updated event and display in calender without page refresh
}
});
}
});
calendar.render();
});
</script>
<div class="row">
<div id="msg"></div>
<div class="col-md-12">
<div id='calendar'></div>
</div>
</div>