Php Fullcalendar事件添加/编辑并调整大小。无需重新加载/刷新页面即可获得成功回调
当我添加新事件、更新事件、更改事件或拖动新时间或新用户时，每次页面刷新时。但如何解决此问题，而无需重新加载页面和显示更新的事件时间或删除事件。我正在使用日历版本5进行fullcalendarPhp Fullcalendar事件添加/编辑并调整大小。无需重新加载/刷新页面即可获得成功回调,php,jquery,ajax,fullcalendar,fullcalendar-5,Php,Jquery,Ajax,Fullcalendar,Fullcalendar 5,当我添加新事件、更新事件、更改事件或拖动新时间或新用户时，每次页面刷新时。但如何解决此问题，而无需重新加载页面和显示更新的事件时间或删除事件。我正在使用日历版本5进行fullcalendar <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById(
<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>
document.addEventListener（'DOMContentLoaded'，function（）{
var calendarEl=document.getElementById（'calendar'）；
var calendar=新的完整日历。日历（calendarEl{
现在：''，
是的，
方面：1.8，
滚动时间：“00:00”，
时间格式：“H（：mm）”，
headerToolbar：{
左：“今天上一个，下一个”，
中心：'标题'，
右图：“resourceTimelineDay、timeGridWeek、dayGridMonth”
},
资源：，
事件：函数（信息、成功回调、失败回调）{
successCallback（）
},
日期点击：功能（信息）{
$（'#addScheduleEntry'）.modal（'show'）；
$（文档）.on（'click'，'）.modal_default_ok'，function（）{
$.ajax({
url:“calendar\u event\u create.php”，
类型：“POST”，
数据：$（“#frmEvent”）.serialize（），
数据类型：“json”，
成功：功能（响应）{
如果（response.result==“success”）{
//如何在不刷新页面的情况下获取更新的事件并在日历中显示
}
}
});
});
},
eventClick:函数（信息、jsEvent、视图）{
$.ajax({
url:“calendar\u event\u update.php”，
类型：“POST”，
数据：$（“#frmEventUpdate”）.serialize（），
数据类型：“json”，
成功：功能（响应）{
//如何在不刷新页面的情况下获取更新的事件并在日历中显示
}
});
},
是的，
eventDrop：函数（信息、增量、恢复函数、用户界面）{
$.ajax({
url:“save\u drop\u event\u detail.php”，
类型：“POST”，
数据：{EventId:EventId}，
数据类型：“json”，
成功：功能（响应）{
//如何在不刷新页面的情况下获取更新的事件并在日历中显示
}
});
},
eventResize:函数（信息）{
$.ajax({
url:“save_resize_event_detail.php”，
类型：“POST”，
数据：{EventId:EventId}，
数据类型：“json”，
成功：功能（响应）{
//如何在不刷新页面的情况下获取更新的事件并在日历中显示
}
});
}
});
calendar.render（）；
});
document.addEventListener（'DOMContentLoaded'，function（）{
var calendarEl=document.getElementById（'calendar'）；
var calendar=新的完整日历。日历（calendarEl{
现在：''，
是的，
方面：1.8，
headerToolbar：{
左：“今天上一个，下一个”，
中心：'标题'，
右图：“resourceTimelineDay、timeGridWeek、dayGridMonth”
},
观点：{
timeGridWeek：{
键入：“时间网格”，
持续时间：{周：}
}
},
资源：，
事件：函数（fetchInfo、successCallback、failureCallback）{
var fromDate=“”；
var toDate=“”；
$.ajax({
url:“ajaxRefresh.php”，
类型：“POST”，
数据类型：“json”，
成功：功能（响应）{
var事件=[]；
$。每个（响应、功能（i、项目）{
事件。推({
id:response[i].id，
开始：响应[i]。开始，
结束：响应[i]。结束，
标题：回复[i]。标题，
});
});
成功回调（事件）；
}
});
},
日期点击：功能（信息）{
$（'#addScheduleEntry'）.modal（'show'）；
$.ajax({
url:“calendar\u event\u create.php”，
类型：“POST”，
数据：$（“#frmEvent”）.serialize（），
数据类型：“json”，
async:false，
成功：功能（响应）{
如果（response.result==“success”）{
calendar.refetchEvents（）；
}
}
});
},
eventClick:函数（信息、jsEvent、视图）{
var text=JSON.stringify（信息、函数（键、值）{
var eventId=info.event.\u def.publicId；
$（#eventDetail”）.modal（“show”）；
$（document）.on（'click'，'removeEvent'，function（）{
var eventId=$（“#event_id”）.val（）；
var yes=确认（“您确定吗？”）；
如果（是==真）{
$（“#进程加载程序”）.fadeIn（）；
$.ajax({
url:“calendar\u event\u remove.php”，
类型：“POST”，
数据：{eventId:eventId}，
数据类型：“json”，
async:false，
成功：功能（响应）{
如果（response.msg==“true”）{
calendar.refetchEvents（）；
}
}
});
}
});
},
是的，
eventDrop：函数（信息、增量、恢复函数、用户界面）{
$.ajax({
url:“save\u drop\u event\u detail.php”，
类型：“POST”，
数据：{EventId:EventId，oldUserId:oldUserId，newUserId:newUserId，newEventStartTime:newEventStartTime，newEventEndTime:newEventEndTime}，
数据类型：“json”，
async:false，
成功：功能（响应）{
如果（response.msg==“success”）{
calendar.refetchEvents（）；
}
}
});
},
事件约束：{
slotMinTime:'10:00'，
slotMaxTime:'11:00'
}
});
calendar.render（）；
});
<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,
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'resourceTimelineDay,timeGridWeek,dayGridMonth'
},
views: {
timeGridWeek: {
type: 'timeGrid',
duration: { weeks: <?php if($searchWeek=="") { echo 1; } else{echo $searchWeek;} ?> }
}
},
resources: <?php eventGroups(); ?>,
events: function(fetchInfo, successCallback, failureCallback) {
var fromDate = "<?php echo $fromDate; ?>";
var toDate = "<?php echo $toDate; ?>";
$.ajax({
url: "ajaxRefresh.php",
type: "POST",
dataType: "json",
success: function(response){
var events = [];
$.each(response, function (i, item) {
events.push({
id: response[i].id,
start: response[i].start,
end: response[i].end,
title: response[i].title,
});
});
successCallback(events);
}
});
},
dateClick: function(info) {
$('#addScheduleEntry').modal('show');
$.ajax({
url: "calendar_event_create.php",
type: "POST",
data: $("#frmEvent").serialize(),
dataType: 'json',
async : false,
success: function(response){
if(response.result == 'success'){
calendar.refetchEvents();
}
}
});
},
eventClick: function(info, jsEvent, view) {
var text = JSON.stringify(info, function (key, value) {
var eventId = info.event._def.publicId;
$("#eventDetail").modal("show");
$(document).on('click', '.removeEvent', function() {
var eventId = $("#event_id").val();
var yes = confirm("Are you sure ?");
if(yes == true){
$("#process_loader").fadeIn();
$.ajax({
url: "calendar_event_remove.php",
type: "POST",
data: {eventId:eventId},
dataType: 'json',
async : false,
success: function(response){
if(response.msg == "true"){
calendar.refetchEvents();
}
}
});
}
});
},
editable: true,
eventDrop: function(info, delta, revertFunc, ui) {
$.ajax({
url: "save_drop_event_detail.php",
type: "POST",
data: {EventId:EventId,oldUserId:oldUserId,newUserId:newUserId,newEventStartTime:newEventStartTime,newEventEndTime:newEventEndTime},
dataType: 'json',
async : false,
success: function(response){
if(response.msg == 'success'){
calendar.refetchEvents();
}
}
});
},
eventConstraint: {
slotMinTime: '10:00' ,
slotMaxTime: '11:00'
}
});
calendar.render();
});
</script>