Fullcalendar Event Add/Edit and Resize. И получить sucesscallback без перезагрузки / обновления страницы

Question

Когда я добавляю новое событие или обновляю событие, или изменяю событие, или перетаскиваю новое время или нового пользователя, тогда страница обновляется каждый раз. но как решить эту проблему без перезагрузки страницы и отображения обновленного времени события или удаления события. Я использую версию календаря 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 для ваших событий вместо статического.