CODEWITHSUNDEEP
javascriptjqueryhtmlfullcalendar
Paras Daryanani
Paras Daryanani

Reputation: 305

How to create a toggle button for the 'editable' property on FullCalendar

Is there a way to create a button that can toggle the editable property of jquery fullcalendar? I have a calendar with multiple events and I want to create a button called "quick edit". On clicking this button, the events should become draggable and resizable, and when I click the button again, the events should no longer be draggable and resizable.

I have tried this in the console:

$("#calendar").fullCalendar({
    editable: false
});

But since editable is a 'per event' property, it doesn't get applied to all events in the calendar.

I also tried using HTML5 localstorage to store a 'flag' that specifies the value of the editable property when initialising fullcalendar, along the lines of this:

var IsEditable = sessionStorage.getItem("Editable");
if (IsEditable === false){
    sessionStorage.setItem("Editable", true);
}
else {
    sessionStorage.setItem("Editable", false);
}

And then I use:

$(document).ready(function() {
    var calendar = $('#calendar').fullCalendar({
        // properties 
        editable: sessionStorage.getItem("Editable")
    });
});

But even this does not work. Any ideas?

Upvotes: 0

Views: 868

Answers (1)

Paras Daryanani
Paras Daryanani

Reputation: 305

Right after posting the question, I found a way to do it:

$('#calendar').fullCalendar('option', {
    editable: false
});

Turns out you can change any of the options in an already initialized instance of FullCalendar, using the 'option' property, more about which you can read here: https://fullcalendar.io/docs/utilities/dynamic_options/

Hope this helps others!

Upvotes: 2

Related Questions