Prevent overlapping when dragging events onto FullCalendar

Question

I have a few external events that should only be dropped onto FullCalendar if data-shareable = 'true'. If data-shareable = 'false' then the event can be dropped as long as it doesn't overlap with another dropped event.

if (this.getAttribute('data-shareable') == 'true' ) {
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
}else{
alert('this is not a shareable resource');
}

I created this example jsfiddle .

Note: 'Event 2' is the only one that is data-shareable = 'false' therefore it should not be dropped if it overlaps with another dropped event.

Answer 1

http://jsfiddle.net/9hMgJ/11/

Added lines 13 - 14 to extend the object and hold information on the data-id and data-shareable.

            var eventObject = {
            title: $.trim($(this).text()), // use the element's text as the event title
            shareable: $(this).data('shareable'),
            id: $(this).data('id')
        };

Now, you will need to change your decision logic. You will have to check if both, target and dragged, events are shareable, and if the beginning or ending of one is between the range of the other and viceversa.

If they are shareable, nothing more to do, if they are not, check dates.

If dates don't overlap, go ahead! If not, dismiss and note the user :)