FullCalendar，插入数据库后无法刷新事件

Question

我的 FullCalendar v6 和向 mysql 数据库添加事件以及刷新页面/事件时遇到问题。如果我添加事件，它会正确地插入到数据库中，但是 FullCalendar 没有加载，也没有显示事件所以我必须按 F5。

我有 FullCalendar 的这些代码：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
      locale: 'cs',
      editable: true,
      selectable: true,
      selectLongPressDelay: 500,
      unselectAuto: false,
      select: function(info) {

          var start = moment(info.start).format('YYYY-MM-DD HH:mm:ss');
          var end = moment(info.end).format('YYYY-MM-DD HH:mm:ss');

          $('#add-event-modal-visit #event_start').val(start);
          $('#add-event-modal-visit #event_end').val(end);

          $('#add-event-modal-visit').modal('show');

      },
      headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridYear,dayGridMonth,timeGridWeek,timeGridDay'
      },
      views: {
          timeGridWeek: {
              titleFormat: {
                  year: 'numeric',
                  month: 'long',

              },
              dayHeaderFormat: { day: 'numeric', weekday: 'short' },
              slotLabelFormat: { hour: 'numeric', minute: 'numeric' },
          }
      },
      themeSystem: 'bootstrap5',

    firstDay: 1, 
    initialView: 'timeGridWeek', 
    nowIndicator: true, 
    slotMinTime: '08:00:00', 
    slotMaxTime: '21:00:00', 
    editable: true,
    selectable: true,
    dayMaxEvents: true, 
      eventContent: function(arg) {
          var startTime = calendar.formatDate(arg.event.start, {
              hour: '2-digit',
              minute: '2-digit'
          });
          var endTime = calendar.formatDate(arg.event.end, {
              hour: '2-digit',
              minute: '2-digit'
          });
          return { html: '<div class="fc-content">' +
          '<div class="fc-time">' + startTime + ' - ' + endTime + '</div>' +
          '<div class="fc-title"><b>' + arg.event.title + '</b></div>' +
          '<div class="fc-description">' + arg.event.extendedProps.description + '</div>' +
          '</div>' };
      },

      events: [
          <?php
         
          $query = "SELECT * FROM events ORDER BY id";
          $result = mysqli_query($conn, $query);

          while ($row = mysqli_fetch_array($result)) {
          $id = $row['id'];
          $title = $row['event_name'];
          $start = $row['event_start'];
          $end = $row['event_end'];
          $eventColor = $row['event_color'];
          $shortDescription = $row['event_short_description'];
          ?>
          {
              id: '<?php echo $id; ?>',
              title: '<?php echo $title; ?>',
              start: '<?php echo $start; ?>',
              end: '<?php echo $end; ?>',
              color: '<?php echo $eventColor; ?>',
              extendedProps: {
                  description: '<?php echo $shortDescription; ?>'
              }
          },
          <?php
          }
          ?>
      ],

  });

  calendar.render();
});

在 FullCalendar 中点击时间后，显示模态，我在其中填充数据，在模态窗口中点击完成后，我调用函数：

<script>

  
    $(document).ready(function() {
        $('#add-event-modal-visit #add_event_visit').on('click', function() {
            console.log("klik");
            var event_name = $("#add-event-modal-visit #event_name").val();
            var id_customer = $("#add-event-modal-visit #id_customer").val();
            var id_service = $("#add-event-modal-visit #id_service").val();
            var event_start = $("#add-event-modal-visit #event_start").val();
            var event_end = $("#add-event-modal-visit #event_end").val();
            var deposit = $("#add-event-modal-visit #deposit").val();
            var event_description = $("#add-event-modal-visit #event_description").val();
            var event_type = 'visit';

            console.log(event_name);
            console.log(id_customer);
            console.log(id_service);
            console.log(event_start);
            console.log(event_end);
            console.log(deposit);
            console.log(event_description);
            console.log(event_type);


            $.ajax({
                url: 'add_event/add_event_visit.php',
                data: 'event_name=' + event_name +
                '&id_customer=' + id_customer +
                '&id_service=' + id_service +
                '&event_start=' + event_start +
                '&event_end=' + event_end +
                '&deposit=' + deposit +
                '&event_description=' + event_description +
                '&event_type=' + event_type,
                type: "POST",
                success: function (json) {

                    console.log("ok");

    
                    $('#add-event-modal-visit').modal('hide');

                    //calendar.refetchEventsAndResources();
                    //calendar.render();
                    //calendar.refetchEvents();
                    //location.reload();
                },
                error: function () {
                    console.log("Chyba při ukládání události do databáze.");
                },
                dataType: 'json'
            });
        });
    });

</script>

console.log 中的所有内容都正确写入，之后使用此代码调用 php.script - add_event_visit.php：

<?php

require('../../include/connection.php');

    $event_type = $_POST["event_type"];
    $event_name = $_POST["event_name"];
    $service_id = $_POST["id_service"];
    $customer_id = $_POST["id_customer"];
    $event_start = $_POST["event_start"];
    $event_end = $_POST["event_end"];
    $event_description = $_POST["event_description"];
    $deposit = $_POST["deposit"];

    $service_name = "
        select
        *
        FROM
            services
            where id = '$service_id';
        ";

    $mysql_query_service_name = mysqli_query($conn, $service_name);
    $row_service = mysqli_fetch_array($mysql_query_service_name);

    $event_short_description = $row_service['name'];

    $event_color = "
        select
        *
        FROM
            event_colors
            where id_item = '$service_id'
            and type = '$event_type';
        ";

    $mysql_query_event_color = mysqli_query($conn, $event_color);
    $row_event_color = mysqli_fetch_array($mysql_query_event_color);

    $event_color = $row_event_color['color'];

$sql = "INSERT INTO events(id, event_type, event_name, event_short_description, id_customer, id_service, event_start, event_end, event_color, event_description, deposit) 
VALUES (DEFAULT,'$event_type','$event_name','$event_short_description','$customer_id','$service_id','$event_start','$event_end','$event_color','$event_description','$deposit')";

if (mysqli_query($conn, $sql)) {
    $response = array('status' => 'success', 'message' => 'Data byla úspěšně aktualizována.');
} else {
    $response = array('status' => 'error', 'message' => 'Chyba při aktualizaci dat v databázi.');
}
header('Content-Type: application/json');
echo json_encode($response);

?>

事件已保存到数据库，但关闭模态窗口后，事件不会显示在 FullCalendar 中，我必须按 F5 刷新页面。我试过了：calendar.refetchEventsAndResources(); calendar.render();calendar.refetchEvents();。一切都不起作用。如果我使用 location.reload() 重新加载页面，那么如果我添加事件，例如五月日期，那会跳回到实际的一周。