CODEWITHSUNDEEP
fullcalendar
Schwertfisch
Schwertfisch

Reputation: 143

In between the calendar div and the external events fullcalendar

Can anybody tell me which fullcalendar event callback should I use To handle the case where : the current external event stopped dragging and it's localised not over the external events Box neither over The Calendar?

knowing that I have both methods isEventOverDiv //return true/false if we are (not) over the external events and isEventOverDivCal//return true/false if we are (not) over the calendar

I tried in eventDragStop: function (event, jsEvent, ui, view) 

  eventDragStop: function (event, jsEvent, ui, view){

    // if the event is not over the external events box and neither over the calendar
    if(!isEventOverDiv(jsEvent.clientX, jsEvent.clientY) && !isEventOverDivCal(jsEvent.clientX, jsEvent.clientY) ) {
        // reset 
         var reccupuredIndexForTitle=$(this).attr('id');
         $scope.ctrlendDragging(reccupuredIndexForTitle);
    }

    }



    //return true if we are over the external events
    var isEventOverDiv = function (x, y) {

        var external_events = $('#external-events');
        var offset = external_events.offset();
        offset.right = external_events.width() + offset.left;
        offset.bottom = external_events.height() + offset.top;

        // Compare
        if (x >= offset.left &&
        y >= offset.top &&
        x <= offset.right &&
        y <= offset.bottom) {return true;}
        return false;

    };

    //return true if we are over the calendar
    var isEventOverDivCal = function(x, y) {
                var external_events = $( '#calendar' );
                var offset = external_events.offset();
                offset.right = external_events.width() + offset.left;
                offset.bottom = external_events.height() + offset.top;

                // Compare
                if (x >= offset.left
                    && y >= offset.top
                    && x <= offset.right
                    && y <= offset .bottom) { return true;}
                return false;
    }

but it's not working.

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.

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 

 // 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:

enter image description here

Many thanks.

Upvotes: 0

Views: 771

Answers (1)

Schwertfisch
Schwertfisch

Reputation: 143

added the following to my controller:

    var x =-1;
    var y=-1;
    $('#external-events').on('dragstop', function(evt) 
    {

            isDragging = false;
            x = evt.originalEvent.pageX;
            y = evt.originalEvent.pageY;
            if(!isDragging && x !=-1 && y!=-1 && !isEventOverDiv(x, y) && !isEventOverDivCal(x, y) )               
            {
                     // reset 
                     var reccupuredIndexForTitle=$('.fc-event').attr('id');
                     $scope.ctrlendDragging(reccupuredIndexForTitle);
            }

    });

As you can see from the code, I used jquery on('dragstop') because I don't know why on ondragend event is not fired

so I removed it from my view HTML ondragend="angular.element(this).scope().ctrlendDragging(id)"

and called manualy from my controller $scope.ctrlendDragging(id) to reset the current dragged event when stoped via $('#external-events').on('dragstop', function(evt) and handled the case the current external event stopped dragging and it's localised not over the external events Box neither over The Calendar via 

if(!isDragging && x !=-1 && y!=-1 && !isEventOverDiv(x, y) && !isEventOverDivCal(x, y) )

Working codePen

update2:

Because The first solution is basic and work in hazardous conditions It works only for the first draggable li and it's not exact nor precise. I made an update to the following:

    var domRect;
    var isDragging = false;
    var x =-1;
    var y=-1;
    $scope.positionX =-1;
    $scope.positionY=-1;    

    var myId=-1;

    $(document).ready(function() {
        $scope.ctrlstartDragging = function(id) {
               myId = id;
        };


        $scope.ctrlendDragging = function(id) {

           book.style.zIndex = "9999";

        };  




        $('#external-events').on('dragstop', function(evt)
        {  

           $scope.$watchGroup(['positionX','positionY'],function () {
                  x = $scope.positionX;
                  y = $scope.positionY;

           });

           if(!isDragging && x !=-1 && y!=-1 && !isEventOverDiv(x, y) && !isEventOverDivCal(x, y) )      {
                         // reset 
                         var reccupuredIndexForTitle=myId;
                         $scope.ctrlendDragging(reccupuredIndexForTitle);
           } 

        });

});//end of $(document).ready(function()

Enclosed in $(document).ready(function() { all functions that shoul be appplied in document ready:

1- $scope.ctrlstartDragging from which we get myId equal (current li) id passed via html view ondragstart="angular.element(this).scope().ctrlstartDragging(id)"

2- $scope.ctrlendDragging n.b : I set the z-index via book.style.zIndex = "9999"; so we could work in a modal context

3- $('#external-events').on('dragstop', function(evt) that should work in $(document).ready(function() { or $window.load where added a watchgroup on changes made on positionX positionY of an li 

$scope.$watchGroup(['positionX','positionY'],function () {
                  x = $scope.positionX;
                  y = $scope.positionY;

});

also added 

if(!isDragging && x !=-1 && y!=-1 && !isEventOverDiv(x, y) && !isEventOverDivCal(x, y) )      {
                                 // reset 
                                 var reccupuredIndexForTitle=myId;
                                 $scope.ctrlendDragging(reccupuredIndexForTitle);
               }

which work with myId this time gotten from $scope.ctrlstartDragging

On the other Hand, I added when initialising external events

$('#external-events .fc-event').each(function() {

drag: function(){ to get the exact positionX positionY for the current dragged li element 

$(this).draggable({
              zIndex: 999,
              revert: true,      // will cause the event to go back to its
              revertDuration: 0,  //  original position after the drag
      drag: function(){
                  var offset = $(this).offset();
                  var xPos = offset.left;
                  var yPos = offset.top;

                  $scope.$apply(function() {

                    $scope.positionX =xPos;
                    $scope.positionY = yPos;

                  });

              }
});

Working codePen for li

Hope it may help somebody ;).

Upvotes: 0

Related Questions