Writing reservations to FullCalendar from php file

I need some advice. I have created a booking calendar using FullCalendar together with a booking form. I was able to send the data from the form to the database but the booking is not transferred to the calendar.

I have created this php file which takes the start and end date of the booking from the database (Calendar.php):

<?php
require_once '../system/access.php';

$sql = "SELECT date_start, date_end FROM booking";
$result = $conn->query($sql);

$events = array();

if ($result) {
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            $events[] = array(
                'start' => $row["date_start"],
                'end' => $row["date_end"]
            );
        }
    }
} else {
    
    error_log("Database error" . $conn->error);
}

$conn->close();


echo json_encode($events);
?>

But now I’m stuck and I don’t know how to send this data to the calendar so that the booking shows up there. I’ve been told that I need to use JS to call the Calendar.php file using Ajax but I don’t know how. I was also told that I need to make an array of objects from the JS object and then somehow include that in the calendar code.

Here is the code for FullCalendar (Calendar.js):

document.addEventListener('DOMContentLoaded', function () {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    locale: 'cs',
    navLinks: true,
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay',
    },
    timeFormat: 'h(:mm)',
    showNonCurrentDates: false,
    buttonText: {
      today: 'Dnes',
      month: 'Měsíc',
      week: 'Týden',
      day: 'Den',
      list: 'Seznam'
    },
    titleFormat: {
      month: 'short',
      year: 'numeric',
    },
    slotLabelFormat: {
      hour: 'numeric',
      minute: '2-digit',
      omitZeroMinute: false,
      meridiem: false,
    },
    eventTimeFormat: {
      hour: 'numeric',
      minute: '2-digit',
      meridiem: false
    },
    allDayText: 'Celý den',
  });
  calendar.render();

});

Any advice or techniques would be greatly appreciated so that I can solve this problem. Thank you 😉

I haven’t tried anything because I don’t know how that’s why I’m creating this post. I expect that once I create a reservation using the form the reservation will show up in the calendar.