fullCalender.io ajax and page reload not actioning

Question

Iam using fullCalender which has method/event calls like dateClick all is working fine. the ajax POST's the data from the bootstrap form and inserts into my db using php script on another page. the modal also 'hides' after submit and modal "asks are you sure you want to create event ".

i also have to manually refresh the page to see the entry appear in the calender.

i want the page either to autoload but ideally use the ajax to insert into the calender so it looks smoother. where is the logic wrong in this jscript?

   dateClick: function (info) {
        $('#eventModal').modal('show');
        $('#start_date').val(info.startStr);

        $('#eventForm').submit(function (e) {
            e.preventDefault();

            if (confirm("Are you sure you want to create the event?")) {
                $('#eventModal').modal('hide');

                $.ajax({
                    url: "adviser_calender_input.php",
                    method: 'POST',
                    data: $(this).serialize(),
                    dataType: 'json',
                    success: function () {
                        console.log("Server response:");
                        $('#calendar').fullCalendar('refetchEvents');
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.error("AJAX Error:", textStatus, errorThrown);
                    }
                });
            }
        });
    },
});


    calendar.render();
});

and here is the bootstrap form in a modal :

<div class="modal fade" id="eventModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                  <form id="eventForm">
                <h4 class="modal-title">Create Event</h4>
             <!--    <button type="button" class="close" data-dismiss="modal">&times;</button>  -->
            </div>
            <div class="modal-body">
              
                    <!-- Your form fields here -->
                    <div class="form-group">
                        <input type="hidden" id="usr_id" name="usr_id" value="<?php echo $_SESSION['usr_id']; ?>">
                        <label for="title">Event Title:</label>
                        <input type="text" class="form-control" id="title" name="title" required>
                    </div>
                    <div class="form-group">
                        <label for="start_date">Start Date:</label>
                        <input type="datetime-local" class="form-control" id="start_date" name="start_date" required>
                    </div>
                    <div class="form-group">
                        <label for="end_date">End Date:</label>
                        <input type="datetime-local" class="form-control" id="end_date" name="end_date" required>
                    </div>
                    <button type="submit" id="closeModalBtn" class="btn btn">Save Event</button>  
              
                </form>
            </div>
        </div>
    </div>
</div>