Update

as I made changes by shearing on an external event so that it can pass over the virtual scroll bar, I will need during the revert of this event to the external event box (in case the user aborts to put the event on the calendar during the dragging and this event is positioned both outside the external event box and outside the calendar)

in that case idealy the external event will have to join its neighbors in the box reserved for them (see the desired effect on that Pen) where the event revert adequately when an user abort a drop of event into calendar by stoppin a dragging event positioned both outside the external event box and outside the calendar.

but in my case see the problematic I need when the revert is applied I sould apply a reset via :

// reset 
         var reccupuredIndexForTitle=$(this).attr('id');
         $scope.ctrlendDragging(reccupuredIndexForTitle);

so idealy the external event will have to join its neighbors in the box reserved for them in the case an user abort a drop of event into calendar by stoppin a dragging event positioned both outside the external event box and outside the calendar.

update 2

I will need during the revert of this event to the external event box to do make a call to it with the folloiwing

update 2

but in my case see MyPlunk I need when the revert is applied , I will need during the revert of this event to the external event box to do make a call to it with the folloiwing

update 2

in order to overcome the obstacle of putting events above the virtual scroll bar during their trip into the calendar

1- I apply from mycontroller $scope.ctrlstartDragging (which triggers from the HTML view on ondragstart="angular.element(this).scope().ctrlstartDragging(id)" callback).

$scope.ctrlstartDragging = function(id) {
    
        var book = document.getElementById(id);
        var domRect = absolutePosition(book);
            book.style.position = 'fixed';
            book.style.top = domRect.top + 'px';
            book.style.left = domRect.left + 'px';
            book.style.width=(domRect.width) + 'px';

    };

and to be able to unset css styles (position top left width)

(N.B: ondragend="angular.element(this).scope().ctrlendDragging(id)" callback)

is not fired and I don't know why but it's not a problematic in my case)

so the purpose is that I should call manually

$scope.ctrlendDragging = function(id) {
     
   var book = document.getElementById(id);
        book.style.position = 'relative';
        book.style.top = 'unset';
        book.style.left = 'unset';
        book.style.width='unset';
};  

and to do as I said, in case the user aborts to put the event on the calendar during the dragging and this event is positioned both outside the external event box and outside the calendar.

I will need during the revert of this event to the external event box to do make a call to it with the folloiwing

 // reset 
 var reccupuredIndexForTitle=$(this).attr('id');
 $scope.ctrlendDragging(reccupuredIndexForTitle);

     

so I need when the revert is applied I sould apply those two lines because if they are not applied when an user abort a dragging into the calendar the event revert but without the unset css styles applied to .style.position top left width I would get an one isolated external event on the top of the external events box like shown below: