Fullcalendar 事件添加/编辑和调整大小。无需重新加载/刷新页面即可获得成功回调

Question

当我添加新事件或更新事件或更改事件或拖动新时间或新用户时，每次页面都会刷新。 但是如何在不重新加载页面并显示更新的事件时间或删除事件的情况下解决此问题。 我正在为 fullcalendar 使用日历版本 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>

Answer 1

<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>

我们使用了这个 function " calendar.refetchEvents(); " 并为您的事件使用了 AJAX 数据源，而不是 static 数据源。