Only allow editable = true on specific events in FullCalendar

Question

I'm trying to get a FullCalendar to only allow event Resize if two specific ids match, but I can't get it to work.

Essentially, I'm loading FullCalendar within a component. This component has a unique ID represented as an event on the calendar. Once the calendar loads to the page, how can I make sure to only set editable: true to that specific event? See below in eventRender for my pseudo code of what I wish to achieve

loadDataToCalendar: function(component, salesAppointments, resExceptions) {
    let myEventid;
    var ele = component.find('calendar').getElement();
    $(ele).fullCalendar({
        eventResize: function(event) {
            component.set("v.startTime", event.start._d);
            component.set("v.endTime", event.end._d);
            component.set("v.showSaveButton", true)
        },
        eventRender: function(event) {
            if (event.id === myUniqueIdHere) {
                event.editable = true // this is what I'm trying to achieve
            }
        },

        header: {
            left: 'prev, next, today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay',
        },

        eventOverlap: false,
        defaultView: 'agendaWeek',
        editable: false,
        eventLimit: true,
        eventSources: [salesAppointments, resExceptions],
        timezone: 'local',
    });
},

So by default, I want editable to be false. When the calendar renders and has a matching ID, I need to set that specific event to editable: true. How would I achieve this? I've tried using eventRender without success.

Answer 1

You should do the compare on the server side of where you are generating the event.

Fullcalendar (and most all such programs) can't change things 'on the fly' as you are trying to do - you often will have to set things on the server first and these programs can render, etc. as per the settings you give.

So, in your event, you should set editable = true for the one(s) you want. https://fullcalendar.io/docs/event-object

You can't (well, not easily - there might be a very round-about way but I don't think it worthy of trying) do this in the 'render' but is simple if you do the check on the server side.

When I say 'server side', I mean 'the data coming into fullcalendar'. As you have these in "salesAppointments" and "resExceptions", you may be able to manipulate this a bit in javascript - but, again, not in the fullcalendar section - something like:

 loadDataToCalendar: function(component, salesAppointments, resExceptions) {
    let myEventid;
    $(salesAppointments).each(function(event)){
        if (event.id === myUniqueIdHere) {
            event.editable = true;
        }    
    }
    $(resExceptions).each(function(event)){
        if (event.id === myUniqueIdHere) {
            event.editable = true;
        }    
    }
    var ele = component.find('calendar').getElement();
        $(ele).fullCalendar({
            eventResize: function(event) {
                component.set("v.startTime", event.start._d);
                component.set("v.endTime", event.end._d);
                component.set("v.showSaveButton", true)
        },
        header: {
            left: 'prev, next, today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay',
        },
        eventOverlap: false,
        defaultView: 'agendaWeek',
        editable: false,
        eventLimit: true,
        eventSources: [salesAppointments, resExceptions],
        timezone: 'local',
    });
},