Re-render jQuerys FullCalendar?

Question

I'm using FullCalendar on a Custom Object that shows each record in a calendar and I'm not entirely sure how I can make the calendar re-render depending on the ID I'm passing it. If I select a specific record (triggered from an application event) - it'll show the calendar correctly (basically, each record has a start time / end time), however, if I select another record, which in turn will trigger the application event and give me a new record ID, the calendar won't re-render - I always need to refresh the page and "start from step one".

Here's my code:

loadDataToCalendar: function(component,data){
    var ele = component.find('calendar').getElement();
    $(ele).fullCalendar({
        dayClick : $A.getCallback(function(date, event, view) {
            component.set("v.startTime", date.format());
            component.set("v.endTime", date.add(1, 'hour').format());
            component.set("v.startDate", date.format('YYYY-MM-DD'));
            component.set("v.endDate", date.format('YYYY-MM-DD'));
            component.set("v.showCreateAppointment", true);
        }),
        eventClick: function(calEvent, jsEvent, view) {
          component.set("v.editSalesApp", true)
          component.set("v.salesAppRecordId", calEvent.id)
        },
        header: {
            left: 'prev, next, today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay',
            center: 'addEventButton'
        },

        eventOverlap: false,
        defaultView: 'agendaWeek',
        minTime : '06:00:00',
        maxTime : '20:00:00',
        //editable: true,
        eventLimit: true,
        events: data,
        timezone: 'local',

    });
},

tranformToFullCalendarFormat: function(component,events) {
    var eventArr = [];
    for(var i = 0;i < events.length;i++){
        eventArr.push({
            'id': events[i].Id, // Sales Appointment ID
            'title': events[i].Asset__r.Name, // Asset ID
            'start':events[i].Start__c,
            'end': events[i].End__c
        });
    }
    return eventArr;
},

fetchEvents: function(component, event, helper) {
    var assetId = event.getParam("assetId"); // Gets the ID that is stored in the SelectedAsset event
    component.set("v.selectedAssetId", assetId);
    var action = component.get("c.getAssets");
    action.setParams({
        "assId": assetId
    });
    var self = this;
    action.setCallback(this, $A.getCallback(function(response) {
        var state = response.getState();
        if(component.isValid() && state === "SUCCESS"){
            var eventArr = self.tranformToFullCalendarFormat(component,response.getReturnValue());
            self.loadDataToCalendar(component,eventArr);
            component.set("v.events",eventArr);
            console.log(component.get("v.events"))
        }
    }));
    $A.enqueueAction(action);
},

According to the documentation I'll use rerenderEvents (https://fullcalendar.io/docs/rerenderEvents) but I don't know how to incorporate this.

Any suggestions? I'd wish for the calendar to re-render everytime a new asset is selected (first line in the fetchEvents function