Fullcalendar Event Add/Edit and Resize.and get sucesscallback without page reload/refresh

When i add new event or update event or change event or drag new time or new user then every time page refreshes. but how to solve this issue for without reloading page and display updated event time or remove event. i’m using calendar version 5 for fullcalendar.

<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

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

We used this function “calendar.refetchEvents();” and used an AJAX data source for your events, instead of a static one.