fullcalendar, refetch events after insert data

Question

I'm using fullCalendar in codeigniter to display data, user will insert data by pressing button after that fullCalendar will display it. but my problem is, user have to refresh the page so data can be displayed in fullCalendar.

Below is my controller.

public function showRecords() {
    $employeeid = getSession('empid');
    $data = $this->attendance->getAttendanceRecords($employeeid);
    echo json_encode($data);
}

And below is the script for initialize fullCalendar

$(document).ready(async function() {
        let recordJson;
        await $.post('<?= getURL('attendance/calendar') ?>', function(data) {
            recordJson = JSON.parse(data);
        });
        setTimeout(function() {
            let calendarEl = document.getElementById('fullCalendar');
            let fullCalendar = new FullCalendar.Calendar(calendarEl, {
                themeSystem: 'bootstrap5',
                headerToolbar: {
                    left: 'attendanceLog',
                    center: 'title',
                    right: 'today,prev,next'
                },
                customButtons: {
                    attendanceLog: {
                        text: 'Attendance Log',
                        click: function(info) {
                            let recordObj = info.event
                            const recordURL = '<?= getURL('attendance/records/') ?>' + recordObj.id
                            if(recordObj) {
                                modalForm(
                                    'Attendance Records',
                                    'modal-sm',
                                    recordURL,
                                )
                            }
                        }
                    }
                },
                eventDisplay: 'background',
                events: recordJson,
                eventClick: function(info) {
                    let eventObj = info.event
                    const formURL = '<?= getURL('attendance/form/') ?>' + eventObj.id
                    if(eventObj) {
                        modalForm(
                            'Attendance',
                            'modal-md',
                            formURL,
                        )
                    }
                }
        });
            fullCalendar.render();
        }, 200);
    });

after user inserting data, i want fullCalendar will refetch latest data. i'm already using fullCalendar.refetch() but it does'nt work so i make my own which is does'nt work too

function refetch() {
        const fullCalendar = document.getElementById('fullCalendar')
    $.ajax({
        type: 'GET',
        url: "<?= getURL('attendance/refetch') ?>",
        dataType: "json",
        success: function(response) {
            fullCalendar.render()
        },
        error: function(xhr, ajaxOptions, thrownError) {
            showError(thrownError + ", please contact administrator for further assistance");
        }
        });
    }

in network tab, function above is appearing but doesn't work the way i wanted.

code below is how data will be saved(might help you guys understand)

$(document).ready(function() {
        $('#form-attendance').on('submit', function(e) {
            e.preventDefault();
            let csrf = decrypter($("#csrf_token").val())
            $("#csrf_token_form").val(csrf);
            let link = "<?= getURL('attendance/clockin') ?>"
            let form_type = "<?= $form_type ?>"
            if(form_type == 'clocked') {
                link = "<?= getURL('attendance/clockout') ?>"
            }
            let data = $(this).serialize();

            $.ajax({
                type: 'POST',
                url: link,
                data: data,
                dataType: "json",
                success: function(response) {
                    $("#csrf_token").val(encrypter(response.csrfToken))
                    $("#csrf_token_form").val("")
                    let pesan = response.pesan;
                    let notif = 'success';
                    if (response.sukses != 1) {
                        notif = 'error'
                    }
                    if (response.pesan != undefined) {
                        pesan = response.pesan
                    }
                    showNotif(notif, pesan)
                    if (response.sukses == 1) {
                        refetch();
                        close_modal('modaldetail')
                    }
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    showError(thrownError + ", please contact administrator for further assistance");
                }
            });
            return false;
        });
    });

please help me guys