Fullcalender V5 RefetchEvents 问题

Question

我正在使用 Fullcalender Scheduler V5。我添加了 calendar.refetchEvents(); 在 eventDrop、eventResize、eventClick 的末尾也是如此。它运作良好。但是当我在其他函数中使用它来添加/编辑事件时，它不起作用。这是我的其他代码：/-----------------------Load.php------------------------------//    <?phprequire_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已经在范围内。您使 saveData 从 AJAX 调用返回一个 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();

     });

   });

});

尽管看起来需要更多工作，但这是一个比使用全局变量更好的结构化版本。