Allow Eventoverlap For Background Events Only In Fullcalendar

Is there a way to avoid event overlapping; like the eventOverlap: false inside the fullcalendar config, but on other hand allow overlap for background events? I want to render some

Solution 1:

You can use quite a simple custom function on the eventOverlap callback to achieve this. Simply test whether the event that is being overlapped onto is a background event or not:

eventOverlap: function(stillEvent, movingEvent) {
    return stillEvent.rendering == "background";
}

You also don't need to specify overlap: true on any of your individual background events.

A working example can be seen here: http://jsfiddle.net/sbxpv25p/18/

https://fullcalendar.io/docs/event_ui/eventOverlap/ explains about the use of a custom function for this callback.

N.B. You may already realise this, but it's worth pointing out: if you plan to save the newly dragged/resized events back to your database, you'll need to double-check the overlap rules on the server as well, since any rules written in JavaScript can be easily disabled or bypassed by anyone with a knowledge of the browser's developer tools. These kind of front-end rules are useful for user-friendliness only - they can't be 100% relied upon to validate your data.