问题
How do I prevent the user from selecting non-colored areas (background events). He should only be able to select the blue-colored areas.

回答1:
Until this request that I made a bit ago is finished, the best solution is this:
Use the following function to check if an event is "inside" of a background event.
var isValidEvent = function(start,end){
return $("#calendar").fullCalendar('clientEvents', function (event) {
return (event.rendering === "background" && //Add more conditions here if you only want to check against certain events
(start.isAfter(event.start) || start.isSame(event.start,'minute')) &&
(end.isBefore(event.end) || end.isSame(event.end,'minute')));
}).length > 0;
};
In every event creation or modification callback, use the function.
select: function (start, end, jsEvent, view) {
if(isValidEvent(start,end)){ //only add it if it's valid
$("#calendar").fullCalendar('addEventSource', [{
start: start,
end: end,
} ]);
}
$("#calendar").fullCalendar("unselect");
},
eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) {
if(!isValidEvent(event.start,event.end)){
revertFunc();
}
},
eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
if(!isValidEvent(event.start,event.end)){
revertFunc();
}
},
Here's a JSFiddle of the result.
来源:https://stackoverflow.com/questions/29831332/fullcalendar-js-preventing-selections-other-than-on-background-events