无法在使用ajax模式更新或编辑事件时进行refetchevents。 Fullcalendar [英] Unable to refetchevents when updating or editing events using ajax modal. Fullcalendar
问题描述
我的问题是，我无法在ajax成功后编辑事件。当我编辑事件时，数据将在数据库中更新，但它不会对日历显示进行任何更改。
因此，我必须先刷新整个页面才能生效更新的事件。
我也尝试了一些我搜索过的答案。像这样：
$（'＃calendar'）。fullCalendar（'removeEventSource'，events）;
$（'＃calendar'）。fullCalendar（'addEventSource'，events）;
$（'＃calendar'）。fullCalendar（'refetchEvents'）;
这一个：
$（'＃calendar'）。fullCalendar（'updateEvent'，id）;
或者：
$（'＃calendar'）。fullCalendar（'removeEvents'，id）; - >这将删除日历中显示的事件
$（'＃calendar'）。fullCalendar（'refetchEvents'）; - >但它不会重新访问该事件。
这些都不适合我。
我一直在寻找大约两天，但没有运气。我也搜索了其他人得到了答案，但他们都不适合我。顺便说一句，添加事件和删除事件工作正常。只有编辑事件不是。
以下是我的完整代码：
$（'＃calendar'）。fullCalendar（{
header：{
left：'today add_event'，
中心：'prev title next'，
右：'month，agendaweek，agendaDay'
}，
eventOrder：'start'，
editable：true，
eventLimit：true，
selectable：true，
allDaySlot：false，
selectHelper：true，
select：function（start，end）{
$（'＃ModalAdd val（moment（start）.format（'YYYY-MM-DD HH：mm：ss'））;
$（'＃ModalAdd #end'）.val（moment（end）。格式（'YYYY-MM-DD HH：mm：ss'））;
$（'＃ModalAdd'）。modal（'show'）;
}，
eventRender：function事件，元素）{
element.bind（'dblclick'，function（）{
$（'＃myModaledit #id'）。val（event.id）;
$（'＃myModaledit #title'）。val（event.title）;
$（'＃myModaledit #start'）。val（moment（event.start）.format（'YYYY-MM-DD HH：mm：ss'））;
$（'＃myModaledit #end'）。val（moment（event.start）.format（'YYYY-MM-DD HH：mm：ss'））;
$（'＃myModaledit'）。modal（'show'）;
}）;
}，
eventDrop：function（event，delta，revertFunc）{
edit（event）;
}，
eventResize：function（event，dayDelta，minuteDelta，revertFunc）{
edit（event）;
}，
events：[
<？php
foreach（$ events as $ event）：
$ start = explode（，$ event ['开始']）;
$ end = explode（，$ event ['end']）;
if（$ start [1] == '00：00：00'）{
$ start = $ start [0];
} else {
$ start = $ event ['start'];
}
if（$ end [1] == '00：00：00'）{
$ end = $ end [0];
} else {
$ end = $ event ['end'];
}？>
{
id：'<？php echo $ event ['id']; ？>'，
title：'<？php echo $ event ['title']; ？>'，
start：'<？php echo $ start; ？>'，
end：'<？php echo $ end; ？>'，
}，
<？php endforeach;？>
]，
}）; （''submit'，function（e）{
e.preventDefault（）;
doAdd（）;
}
$（'＃myFormAdd'）。 ）; （''submit'，function（e）{
e.preventDefault（）;
doEdit（）;
}（
$（'＃myFormEdit'）。 ）; $（'＃deleteButton'）。on（'click'，function（e）{
e.preventDefault（）;
doDelete（）;
） ;
函数doAdd（）{
var title = $（'＃title'）。val（）;
var start = $（'＃start'）。val（）;
var endTime2 = $（'＃end'）。val（）;
$ .ajax（{
url：'addEvent.php'，
data：'action = add& title ='+ title +'& start ='+ start +' & end ='+ end，
type：POST，
success：function（json）{
$（＃calendar）。fullCalendar（'renderEvent'，
{
id：json.id，
title：title，
start：start，
end：end，
}，
true）;
alert（'Added Addedfully！'）;
}
}）;
函数doEdit（）{
var id = $（'＃id'）。val（）;
var title = $（'＃title'）。val（）;
var start = $（'＃start'）。val（）;
var end = $（'＃end'）。val（）;
$ .ajax（{
url：'editEvent.php'，
data：'action = update& id ='+ id +'& title ='+ title +' & start ='+ start +'& end ='+ end，
type：POST，
success：function（json）{
if（json == 1）{
$（'＃calendar'）。fullCalendar（'removeEvents'，id）;
$（'＃calendar'）。fullCalendar（'refetchEvents'）;
alert（'Edited Successfully！' ）;
}
else
return false;
}
}）;
函数doDelete（）{
$（＃myModaledit）。modal（'hide'）;
var id = $（'＃id'）。val（）;
$ .ajax（{
url：'editEvent.php'，
data：'action = delete& id ='+ id，
type：POST，
$ success：function（json）{
if（json == 1）{
$（＃calendar）。fullCalendar（'removeEvents'，id）;
alert（Deleted ）;
}
else
return false;
}
}）;
}
}）;
RefetchEvents你有一个静态数据源。在创建页面时加载一次，然后运行一些PHP，将事件数据转换为JavaScript数组并将其直接嵌入到日历配置中。从JavaScript / fullCalendar的角度来看，这是一个一次性的，不变的阵列。
fullCalendar无法从您的服务器中找到新事件。为了达到这个目的，你必须创建一个单独的PHP脚本（例如，称为getEvents.php或其他），它不做任何事情，而是将日历的最新事件数据作为JSON返回。然后，您将日历中的events选项设置为
events：getEvents.php
通过这种方式，每当事件需要更新时，它就可以向该脚本发出新的ajax请求（例如 refetchEvents 被调用）。
请参阅 https://fullcalendar.io/docs/events-json-feed 了解详情。请注意，fullCalendar会自动发送开始和结束参数（代表日历当前显示的最早和最晚日期），并且您的PHP脚本只会返回落在这些日期之间的事件。无论何时移动到日历上的新时间段，它都会再次调用此脚本。
请注意，在调用refetchEvents之前不需要调用removeEvent 。 refetchEvents将刷新日历上的所有事件，因此您不必担心事先删除任何内容。
My problem is i'm unable to live edit the event after ajax success. Wnen i edit the event, the data will be updated in the database but it doesn't make any changes in the calendar display.
So i have to refresh the whole page first in order to take effect the updated event.
I've also tried some of the answers I've searched. Like this one:
$('#calendar').fullCalendar( 'removeEventSource', events);
$('#calendar').fullCalendar( 'addEventSource', events);
$('#calendar').fullCalendar( 'refetchEvents' );
And this one:
$('#calendar').fullCalendar('updateEvent',id);
Or this:
$('#calendar').fullCalendar( 'removeEvents',id); --> this will remove the event displayed in calendar
$('#calendar').fullCalendar( 'refetchEvents'); --> but it doesn't refetch the event.
None of these seems to work for me.
I've been searching for about two days now, but no luck. I've also searched for others that got answered but all of them doesn't work for me. BTW, the add event and delete event is working properly. Only the edit event isn't.
Here is my full code:
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'today add_event',
center: 'prev title next',
right: 'month,agendaWeek,agendaDay'
},
eventOrder: 'start',
editable: true,
eventLimit: true,
selectable: true,
allDaySlot: false,
selectHelper: true,
select: function(start, end) {
$('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd').modal('show');
},
eventRender: function(event, element) {
element.bind('dblclick', function() {
$('#myModaledit #id').val(event.id);
$('#myModaledit #title').val(event.title);
$('#myModaledit #start').val(moment(event.start).format('YYYY-MM-DD HH:mm:ss'));
$('#myModaledit #end').val(moment(event.start).format('YYYY-MM-DD HH:mm:ss'));
$('#myModaledit').modal('show');
});
},
eventDrop: function(event, delta, revertFunc) {
edit(event);
},
eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
edit(event);
},
events: [
<?php
foreach($events as $event):
$start = explode(" ", $event['start']);
$end = explode(" ", $event['end']);
if($start[1] == '00:00:00'){
$start = $start[0];
}else{
$start = $event['start'];
}
if($end[1] == '00:00:00'){
$end = $end[0];
}else{
$end = $event['end'];
}?>
{
id: '<?php echo $event['id']; ?>',
title: '<?php echo $event['title']; ?>',
start: '<?php echo $start; ?>',
end: '<?php echo $end; ?>',
},
<?php endforeach;?>
],
});
$('#myFormAdd').on('submit', function(e){
e.preventDefault();
doAdd();
});
$('#myFormEdit').on('submit', function(e){
e.preventDefault();
doEdit();
});
$('#deleteButton').on('click', function(e){
e.preventDefault();
doDelete();
);
function doAdd(){
var title = $('#title').val();
var start = $('#start').val();
var endTime2 = $('#end').val();
$.ajax({
url: 'addEvent.php',
data: 'action=add&title='+title+'&start='+start+'&end='+end,
type: "POST",
success: function(json) {
$("#calendar").fullCalendar('renderEvent',
{
id: json.id,
title: title,
start: start,
end: end,
},
true);
alert('Added Successfully!');
}
});
}
function doEdit(){
var id = $('#id').val();
var title = $('#title').val();
var start = $('#start').val();
var end = $('#end').val();
$.ajax({
url: 'editEvent.php',
data: 'action=update&id='+id+'&title='+title+'&start='+start+'&end='+end,
type: "POST",
success: function(json) {
if(json == 1){
$('#calendar').fullCalendar( 'removeEvents',id);
$('#calendar').fullCalendar( 'refetchEvents');
alert('Edited Successfully!');
}
else
return false;
}
});
}
function doDelete(){
$("#myModaledit").modal('hide');
var id = $('#id').val();
$.ajax({
url: 'editEvent.php',
data: 'action=delete&id='+id,
type: "POST",
success: function(json) {
if(json == 1){
$("#calendar").fullCalendar('removeEvents',id);
alert("Deleted successfully!");
}
else
return false;
}
});
}
});
The "RefetchEvents" method isn't doing anything because you have a static data source. You load it once when the page is created, and run some PHP which turns the event data into a JavaScript array and embeds it directly into your calendar config. From JavaScript/fullCalendar's point of view this is a one-off, unchanging array.
There's no way for fullCalendar to find new events from your server. For that to work you'd have to create a separate PHP script (e.g. called "getEvents.php" or something) which does nothing but return the latest event data for the calendar as JSON. Then you'd set the events option in the calendar as
events: "getEvents.php"
That way it can make a fresh ajax request to that script every time the events need updating (such as when refetchEvents is called).
See https://fullcalendar.io/docs/events-json-feed for details. note that fullCalendar automatically sends "start" and "end" parameters (which represent the earliest and latest dates the calendar is currently showing) and your PHP script is expected to only return events which fall between those dates. It will call this script again whenever you move to a new time period on the calendar.
Note that there is no need to call "removeEvent" just before you call "refetchEvents". "refetchEvents" will refresh any and all events on the calendar, so you don't need to worry about removing anything beforehand.
这篇关于无法在使用ajax模式更新或编辑事件时进行refetchevents。 Fullcalendar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
