使用AJAX Modal更新或编辑事件时，无法进行补充.Fullcalendar

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

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

FullCalendar无法从您的服务器中找到新事件。为此，您必须创建一个单独的PHP脚本(例如称为" getevents.php"之类的东西(，该脚本除了将日历的最新事件数据返回为JSON。然后，您将日历中的事件选项设置为

events: "getEvents.php"

这样，每当事件需要更新时(例如，何时调用refetchEvents(，它可以向该脚本提出新的Ajax请求。

有关详细信息，请参见https://fullcalendar.io/docs/events-json-feed。请注意，FullCalendar会自动发送" start"one_answers" end"参数(代表当前显示日历的最早和最新日期(，并且您的PHP脚本有望仅返回这些日期之间的事件。每当您搬到日历上的新时间段时，它将再次调用此脚本。

请注意，在调用" Refetchevents"之前，无需调用" removeEvent"。" Refetchevents"将刷新日历上的所有事件，因此您无需事先删除任何内容。