Fullcalender V5 RefetchEvents 问题

Question

我正在使用 Fullcalender Scheduler V5。我添加了 calendar.refetchEvents(); 在 eventDrop、eventResize、eventClick 的末尾也是如此。它运作良好。但是当我在其他函数中使用它来添加/编辑事件时，它不起作用。

这是我的其他代码：

/-----------------------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 variabledocument.addEventListener('DOMContentLoaded', function() {&nbsp; var calendarEl = document.getElementById('calendar');&nbsp; 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(){&nbsp; var Room = document.getElementById("Room").value;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; var EventName = document.getElementById("EventName").value;&nbsp; var start = document.getElementById("start").value;&nbsp; var end = document.getElementById("end").value;&nbsp; var promise = $.ajax({&nbsp; &nbsp; url: "addEvent.php",&nbsp; &nbsp; type:"POST",&nbsp; &nbsp; data:{ EventName: EventName, start:start, end: end },&nbsp; });&nbsp;&nbsp; $('#ModalAdd').modal('hide');&nbsp; return promise;}最后在 DOMContentLoaded 区域：document.addEventListener('DOMContentLoaded', function() {&nbsp; &nbsp;//....everything which is already there....and then...&nbsp; &nbsp;$("#savedata").click(function() {&nbsp; &nbsp; &nbsp;var promise = saveData();&nbsp; &nbsp; &nbsp;promise.done(function(data) {&nbsp; &nbsp; &nbsp; &nbsp;calendar.refetchEvents();&nbsp; &nbsp; &nbsp;});&nbsp; &nbsp;});});尽管看起来需要更多工作，但这是一个比使用全局变量更好的结构化版本。