Fullcalendar V5 RefetchEvents 问题

Question

我正在使用 Fullcalender Scheduler V5。我添加了 calendar.refetchEvents();在 eventDrop、eventResize、eventClick 的最后。它运作良好。但是当我在其他功能中使用它来添加/编辑事件时，它不是 working.Here 是我的代码：

    <!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

    <script src='moment-timezone.js'></script>
    <script src='lib/locales-all.js'></script>
    <link href='fullcalender_scheduler/main.css' rel='stylesheet' />
    <script src='fullcalender_scheduler/main.js'></script>
    <script src='fullcalender_scheduler/ja.js'></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',   
    eventTimeFormat: { hour: 'numeric', minute: '2-digit' }, 
    businessHours: true,  
    height: '100%',
    aspectRatio: 1.8,
    editable: true, // enable draggable events
    now: new Date(),
    scrollTime: '00:00', // undo default 6am scrollTime
    headerToolbar: {
      left: 'today prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineTenDays,timeGridWeek,dayGridMonth,listWeek'
    },
    initialView: 'resourceTimelineDay',
    views: {
      resourceTimelineTenDays: {
        type: 'resourceTimeline',
        duration: { days: 10 },
        buttonText: '10 days'
      }
    },
    expandRows: true,
    resourceAreaWidth: '10%',
    resourceAreaHeaderContent: 'Rooms',
    resourceOrder: 'type1', // to set the displayorder of resources
    resources: [
      { id: '1', title: 'R1' , eventColor: 'blue', type1:10},
      { id: '2', title: 'R2', eventColor: 'green',type1:13 },
      { id: '3', title: 'R3', eventColor: '#F39C12',type1:14 },
      { id: '4', title: 'R4', eventColor: 'red' ,type1:11 },
      { id: '5', title: 'R5', eventColor: '#8E44AD',type1:12 },
    ],

    events :'load.php',
    selectable:true,
    selectHelper:true,
//---------------------------ADD EVENTS----------------------------------------///
    select: function(info) {
        var st_time = info.startStr;
        var start =st_time.split("T").join(" ");
        var end_time = info.endStr;
        var end =end_time.split("T").join(" ");
        var resourc =info.event._def.resourceIds;  
        var resourceId = resourc.toString();
        
        
      $('#ModalAdd').modal('show');
      $('#ModalAdd #Room').val(resourceId);
      $('#ModalAdd #start').val(start);
      $('#ModalAdd #end').val(end);
    },
    
eventResize:function(info)
    {
     var resourc =info.event._def.resourceIds; 
     var resourceId = resourc.toString(); 
     var title = info.event.title;
     var start =info.event.start;
             var end =info.event.end;    
     var id = info.event.id;
     
     var scriptUrl = "DragEvent.php";
     
     $.ajax({
      url:scriptUrl,
      type:"POST",
      data:{title:title, start:start, end:end, id:id, resourceId:resourceId},
      
      success: function(data){
        alert('Event updated');
        calendar.refetchEvents();---------Here, its working well
      }
     })
    },

  });
  
  calendar.render();
  
});

function saveData()
   {
 var Room= document.getElementById("Room").value;      
 var EventName= document.getElementById("EventName").value;
 var start=document.getElementById("start").value;
 var end=document.getElementById("end").value;

 var ScriptUrl="addEvent.php";  
    $.ajax({
       url:ScriptUrl,
       type:"POST",
       data:{EventName:EventName, start:start, end:end},
       
      success: function(data){
        alert("Added successfully");
        // calendar.refetchEvents();-----------------------tried here. Not working
       }
 
       });
     
     $('#ModalAdd').modal('hide');
        calendar.refetchEvents();----------Here also, Not working
   }

</script>
<style>

  html, body {
    overflow: hidden; /* don't do scrollbars */
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .fc-header-toolbar {
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
  }

</style>
</head>
<body>
   
   <!-- Modal -->
        <div class="modal fade" id="ModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
            <form class="form-horizontal" method="POST" action="pages/calenderpages/addEvent.php" name="add_item" id ="add_item">
            
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"><b>Add events</b></h4>
              </div>
              <div class="modal-body">
                  <div class="form-group">
                   <input type="hidden" name="Room" class="form-control" id="Room" value="">
                    <label for="genryo" class="col-sm-4 control-label">Event name</label>
                    <div class="col-sm-8">
                      <input type="text" name="EventName" class="form-control" id="EventName" value="">
                    </div>
                  </div>              
                  <div class="form-group">
                    <label for="start" class="col-sm-4 control-label">Start</label>
                    <div class="col-sm-8">
                      <input type="text" name="start" class="form-control" id="start" readonly>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="end" class="col-sm-4 control-label">End</label>
                    <div class="col-sm-8">
                      <input type="text" name="end" class="form-control" id="end" readonly>
                    </div>
                  </div>
                
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">CLOSE</button>
                <button type="button" class="btn btn-primary" onclick="saveData()">SAVE</button>
              </div>
            </form>
            </div>
          </div>
        </div>

 <!------------------------------------------>

  <div id='calendar-container'>
    <div id='calendar'></div>
  </div>
</body>
</html>

这是我的其他代码：

/------------------------Load.php---------------- --------------//

    <?php
require_once('../../common/conn_check.php');
require_once('../../common/common.php');

$data=array();

$query ="SELECT * FROM event_schedule "; 


$statement = pg_query($conn,$query);
$result = pg_fetch_all($statement);


foreach($result as $row)
{
    
 $data[] = array(
  'id' => $row["id"],
  'resourceId' => $row["Room"],
  'title' =>$row["EventName"],
  'start'   => $row["StartTime"],
  'end'   => $row["EndTime"]
 );
}


echo json_encode($data);
?>

/---------------AddEvents.php-------------------//


   <?php
    require_once('../../common/conn_check.php');//for using the mysql connection
    require_once('../../common/common.php');//common function
    
    
    
    if (isset($_POST['start']) && isset($_POST['end'])){
        $EventName = $_POST['EventName'];
        $Room = $_POST['Room'];
        $start = $_POST['start'];
        $end = $_POST['end']; 
     
    $sql="INSERT INTO event_schedule
           (Room,EventName, StartTime,EndTime)
           VALUES 
           ('$EventName','$Room','$start', '$end')"; 
           
           
    $result = pg_query($conn,$sql);
        
    echo json_encode(array('success'=>true));
    }
    
    ?>

我已经尝试了好几个星期了，因此我失去了信心。作为初学者，我无法弄清楚出了什么问题。哪位大侠帮忙啊

Answer 1

此处最简单的选择是使 calendar 全局化，以便在所有范围内都可以访问。

例如

<script>
var calendar; //global variable

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  calendar = new FullCalendar.Calendar(calendarEl, { //don't re-declare it here, just assign it

///...etc

但全局变量通常不是最佳做法 - 如果您不小心，它可能会导致其他问题。因此，另一种选择是停止使用内联事件处理程序来触发 saveData，而是在 DOMContentLoaded 块内添加一个事件处理程序，当然 calendar 已经在范围内。您从 AJAX 调用中将 saveData return 设为 Promise，然后在事件处理程序中附加一个 .done() 回调，然后您可以在其中调用 refetchEvents.

所以在这个版本中，你的按钮会变成

<button type="button" class="btn btn-primary" id="savedata">SAVE</button>

并且 saveData() 将变为：

function saveData()
{
  var Room = document.getElementById("Room").value;      
  var EventName = document.getElementById("EventName").value;
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;

  var promise = $.ajax({
    url: "addEvent.php",
    type:"POST",
    data:{ EventName: EventName, start:start, end: end },
  });
 
  $('#ModalAdd').modal('hide');
  return promise;
}

最后在 DOMContentLoaded 区域：

document.addEventListener('DOMContentLoaded', function() {

   //....everything which is already there....and then...

   $("#savedata").click(function() {
     var promise = saveData();

     promise.done(function(data) {
       calendar.refetchEvents();
     });
   });
});

虽然看起来工作量更大，但这是一个比使用全局变量更好的结构化版本。

Fullcalendar V5 RefetchEvents 问题

Fullcalender V5 RefetchEvents issue

javascript

php

fullcalendar

fullcalendar-scheduler

fullcalendar-5