fullcalendar - referencing in ajax calls

Question

I'm trying to use fullcalendar in a web app. I'm creating it using the following...

document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('rcalendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
            start: 'dayGridMonth,timeGridWeek,timeGridDay saveEvents',
            center: 'title',
            end: 'prevYear,prev,next,nextYear'
        },
        customButtons: {
            newEvent: {
                text: 'add new reminder',
                click: function () {
                    alert('clicked custom button 1!');
                }
            },
            saveEvents: {
                text: 'save reminders',
                click: function () {
                    getDates();
                }
            }
        },
        initialView: 'dayGridMonth',
        editable: true,
        slotDuration: '00:30:00',
        selectable: true, //can click to set event
        eventTimeFormat: { // like '14:30:00'
            hour: '2-digit',
            minute: '2-digit',
            meridiem: 'short'
        },
        eventSources: [
            {
                url: '/Content/JSON/OpsReminders.json',
                color: 'blue',
                textColor: 'white',
                editable: 'true'
            }
        ]
    });
    calendar.render();
});

Initially the calendar displays fine and has all the events from the JSON file. However when I add another event to the JSON file in the background I cannot get the calendar to refresh.

I've been trying.....

$.ajax({
    type: "GET",
    url: "/OpsAdmin/SaveReminders/",
    data: {"groupId": '@Model.OpsAdminGroup', "adminId": '@Model.OpAdministrator', "targets": objectStr, "date": eventDate, "time": eventTime, "datetime": eventDateTime, "repeat": rpt, "mon": mon, "tue": tue, "wed": wed, "thu": thu, "fri": fri, "sat": sat, "sun": sun, "msg": msg },
    success: function (result) {
        if (result.saved) {
            hideModal();
        }  
    },
    complete: function() {
        $('#calendar').fullCalendar('refetchEvents');
    },
    error: function (errorData) { onError(errorData); }
});

but the problem seems to be that I cannot get a reference to the calendar. '#calendar' seems to return nothing. Can anyone suggest any ideas why I can't get a reference to the calendar and confirm if I'm doing this the right way in the first place?