全日历事件添加/编辑和调整大小。并获得成功回调，无需重新加载/刷新页面

Question

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

            }

        });

      },

Answer 1

<script type="text/javascript">&nbsp; document.addEventListener('DOMContentLoaded', function() {&nbsp; &nbsp; var calendarEl = document.getElementById('calendar');&nbsp; &nbsp; var calendar = new FullCalendar.Calendar(calendarEl, {&nbsp; &nbsp; &nbsp; now: '<?php echo $CurrentDate; ?>',&nbsp; &nbsp; &nbsp; editable: true,&nbsp; &nbsp; &nbsp; aspectRatio: 1.8,&nbsp; &nbsp; &nbsp; headerToolbar: {&nbsp; &nbsp; &nbsp; &nbsp; left: 'today prev,next',&nbsp; &nbsp; &nbsp; &nbsp; center: 'title',&nbsp; &nbsp; &nbsp; &nbsp; right: 'resourceTimelineDay,timeGridWeek,dayGridMonth'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; views: {&nbsp; &nbsp; &nbsp; &nbsp; timeGridWeek: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'timeGrid',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; duration: { weeks: <?php if($searchWeek=="") { echo 1; } else{echo $searchWeek;} ?> }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; resources: <?php eventGroups(); ?>,&nbsp; &nbsp; &nbsp; events: function(fetchInfo, successCallback, failureCallback) {&nbsp; &nbsp; &nbsp; &nbsp; var fromDate = "<?php echo $fromDate; ?>";&nbsp; &nbsp; &nbsp; &nbsp; var toDate = "<?php echo $toDate; ?>";&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "ajaxRefresh.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: "json",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(response){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var events = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.each(response, function (i, item) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; events.push({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: response[i].id,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; start: response[i].start,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; end: response[i].end,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: response[i].title,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; successCallback(events);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; dateClick: function(info) {&nbsp; &nbsp; &nbsp; &nbsp; $('#addScheduleEntry').modal('show');&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "calendar_event_create.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: $("#frmEvent").serialize(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; async : false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(response){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(response.result == 'success'){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; calendar.refetchEvents();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; eventClick: function(info, jsEvent, view) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var text = JSON.stringify(info, function (key, value) {&nbsp; &nbsp; &nbsp; &nbsp; var eventId = info.event._def.publicId;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#eventDetail").modal("show");&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(document).on('click', '.removeEvent', function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var eventId = $("#event_id").val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var yes = confirm("Are you sure ?");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(yes == true){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#process_loader").fadeIn();&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "calendar_event_remove.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {eventId:eventId},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; async : false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(response){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(response.msg == "true"){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; calendar.refetchEvents();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; editable: true,&nbsp; &nbsp; &nbsp; eventDrop: function(info, delta, revertFunc, ui) {&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "save_drop_event_detail.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {EventId:EventId,oldUserId:oldUserId,newUserId:newUserId,newEventStartTime:newEventStartTime,newEventEndTime:newEventEndTime},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; async : false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(response){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(response.msg == 'success'){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; calendar.refetchEvents();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; eventConstraint: {&nbsp; &nbsp; &nbsp; &nbsp; slotMinTime: '10:00' ,&nbsp; &nbsp; &nbsp; &nbsp; slotMaxTime: '11:00'&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; calendar.render();&nbsp; });</script>我们使用了这个函数“ calendar.refetchEvents(); ”，并为您的事件使用了 AJAX 数据源，而不是静态数据源。