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>

我们使用此函数“calendar.refetchEvents();”并为您的事件使用 AJAX 数据源，而不是静态数据源。