Change selection color in FullCalendar

Question

this is more of a two pronged question. Based on items I've tried, there is no way to change the "selectable/selectableOverlap" of a full calendar after it is initialized. The reason I'd like to do that is to have a toggle on the page that allows the user to indicate whether or not they'd like to be able to select or not on the calendar control.

In lieu of that, since the "select" callback is only called when the selection is released (and I want to prevent selection visually), my thought was to just set the opacity of the selected cells to 0 so that they are not shown and I can just unselect when the select callback executes. However, I cannot find a way to modify the colors or css properties of the cells being selected, as shown here:

Is there a way to change the css properties of the cells being selected, or perhaps the first way of dynamically changing whether selection works?

Thanks -

Answer 1

The color of selected cells are defined in .fc-highlight. To change the selection color, I would simply do it by

$("#calendar").fullCalendar({
  select: function(start, end){
    // other code here
    // ..
    $(".fc-highlight").css("background", "red");
  }
});