Question

我的问题是我在ajax成功后无法实时编辑活动。我编辑事件，数据将在数据库中更新，但它不会在日历显示中进行任何更改。

所以我必须先刷新整个页面才能使更新的事件生效。

我也尝试了一些我搜索过的答案。像这样：

    $('#calendar').fullCalendar( 'removeEventSource', events);
    $('#calendar').fullCalendar( 'addEventSource', events);         
    $('#calendar').fullCalendar( 'refetchEvents' );

这一个：

    $('#calendar').fullCalendar('updateEvent',id);

或者这个：

    $('#calendar').fullCalendar( 'removeEvents',id); --> this will remove the event displayed in calendar
    $('#calendar').fullCalendar( 'refetchEvents');   --> but it doesn't refetch the event.

这些似乎都不适合我。

我现在已经搜索了大约两天，但没有运气。我也搜索过得到答案的其他人，但他们都没有为我工作。顺便说一句，添加事件和删除事件正常工作。只有编辑事件不是。

这是我的完整代码：

  $(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;
                   }
               });
           }
        });

Answer 1

＆＃34; RefetchEvents＆＃34;方法没有做任何事情，因为你有一个静态数据源。在创建页面时加载一次，然后运行一些PHP将事件数据转换为JavaScript数组并将其直接嵌入到日历配置中。从JavaScript / fullCalendar的角度来看，这是一个一次性的，不变的数组。

fullCalendar无法从您的服务器中查找新事件。为了实现这一目标，您必须创建一个单独的PHP脚本（例如，称为＆＃34; getEvents.php＆＃34;或其他东西），它只会将日历的最新事件数据作为JSON返回。然后，您将日历中的事件选项设置为

events: "getEvents.php"

这样，每次事件需要更新时（例如调用refetchEvents时），它都可以向该脚本发出新的ajax请求。

有关详细信息，请参阅https://fullcalendar.io/docs/events-json-feed。请注意，fullCalendar会自动发送＆＃34; start＆＃34;和＆＃34;结束＆＃34;参数（表示日历当前显示的最早和最晚日期），您的PHP脚本只能返回介于这些日期之间的事件。每当您在日历上移动到新的时间段时，它都会再次调用此脚本。

请注意，无需调用＆＃34; removeEvent＆＃34;就在你打电话给＆＃34; refetchEvents＆＃34;之前。＆＃34; refetchEvents＆＃34;将刷新日历上的所有事件，因此您不必担心事先删除任何内容。

使用ajax模式更新或编辑事件时无法进行refetchevents。 Fullcalendar

1 个答案: