Change highlight color in FullCalendar

Question

This is a more ambiguous question. Based on the elements I tried, there is no way to change the "selectable / selectableOverlap" of the full calendar after it is initialized. The reason I would like to do this is to switch to a page that allows the user to indicate whether they want to select or not in the calendar control.

Instead, since the “select” callback is only called when the selection is highlighted (and I want to exclude the selection visually), my thought was to simply set the opacity of the selected cells to 0 so that they would not be shown, and I I can simply deselect when doing a select callback. However, I cannot find a way to change the colors or css properties of the selected cells, as shown below:

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

Thank -

Answer 1

The color of the selected cells is determined in .fc-highlight. To change the highlight color, I just do it with

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