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

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

  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 数据源，而不是静态数据源。