reloading Recurring events in full calendar

I am having a full calendar with recursive events. It is working fine if I hard-code the data like this I have created an ajax call to fetch the values from the backend. The values from the backend will be returned in the format of API data. I should also render calendar with on click event of a combo box.

How to load the values returned from the API call to the calendar?

We can render events by using:

 $('#calendar') .fullCalendar( 'removeEvents');
 $('#calendar').fullCalendar('addEventSource', events)
 $('#calendar').fullCalendar('rerenderEvents' );

Since we are getting the values from the function, where to use this code to reload the calendar:

let apiData = [[["11/05/2018","11/11/2018"],"morningShift","10:00","14:00",]]

$(document ).ready(function(){
    $.ajax({
        type     : 'POST',
    //            async    : false,
        dataType : "json",
        url      : pageUrl()+'roster-management/calendar-view/list-calendar-view',
        data     : {
            employeeName: $('#logEmpId').val(),
        },
        success  : function(result)
        {
            apiData=result;
            data(apiData)
           return apiData
        }
    });
});    

 function data(apiData){
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
repeatingEvents =
apiData.map(([[startDate,endDate],title, start, end,])=>({
            title,
            start: start,
            end: end,
            ranges:[{
                start: new Date(startDate),
                end:new Date(endDate ),
            }],
            className: 'bg-primary'})
          )

 return repeatingEvents
 }
var getEvents = function( start, end ){
    data(apiData)      // Here the hardcoded value is taken and passed 
                        // as apiData and it is loaded in calendar.
    return repeatingEvents;
}
$('#calendar').fullCalendar({
    defaultDate: moment(),
    slotDuration: '00:15:00', /* If we want to split day time each 15minutes */
    minTime: '00:00:00', /* calendar start Timing */
    maxTime: '24:00:00',  /* calendar end Timing */
    defaultView: 'month',  
    handleWindowResize: true,   
    height: $(window).height() - 200, 
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'month',
    eventRender: function(event, element, view){
        // console.log(event.start.format());
        return (event.ranges.filter(function(range){
            return (event.start.isBefore(range.end) &&
                    event.end.isAfter(range.start));
        }).length)>0;
    },
    events: function( start, end, timezone, callback ){
        var events = getEvents(start,end); //this should be a JSON request
        callback(events);
    },
});