title: Fullcalendar unable to drag and drop events in a day of basic week view
body: <p>I have been  assigned a project with calendar implementation in Angular js framework.</p>
  
  <p>I integrated fullcalendar 3.8.0  with Angular JS and it is working fine. 
  But customer requires to drag and drop or order events within a day vertically.
   e.g:  basicWeek view.</p>
  
  <pre><code>Mon 1/8
  job three
  job two
  job one.
  </code></pre>
  
  <p>The customer wants to drag the event 'job three' presented at first position and drop after 'job one' event vertically within the day (Mon 1/8).
  e.g:
      Mon 1/8</p>
  
  <pre><code>job two
  job one.
  job three
  </code></pre>
  
  <p>The above is not possible at the moment with fullCalendar.</p>
  
  <p><a href="https://i.stack.imgur.com/3KZnm.png" rel="nofollow noreferrer">Please find the image here</a></p>
  
  <p>Below are the files I am using for fullCalendar integration with Angular JS</p>
  
  <pre><code>   librarires
  
      moment.js
      jquery-1.11.3.js
      angular.js
      ngDraggable.js
      calendar.js
      fullcalendar.js    
      gcal.js
  
      Style Sheet 
  
      &lt;link rel="stylesheet" href="../css3/fullcalendar.css" /&gt;
      &lt;link rel="stylesheet" href="../css/bootstrap.min.css" /&gt;
  
       //Dragable events
      &lt;div class="col-" ng-repeat="obj in draggableObjects" ng-drag="true"
              ng-drag-data="obj" data-allow-transform="false"&gt;{{obj.title}}
  
    &lt;/div&gt;
                          //Calendar binding in UI with Controller
                    &lt;div&gt;
                              &lt;div id="calendar_one"
                                  ng-drop-success="onDropComplete1($data,$event)"
                                  ui-calendar="uiConfig.calendar" ng-model="eventSources"
                                  calendar="myCalendar"&gt;
                                  &lt;div ng-repeat="obj in eventSources" ng-drag="true"
                                      ng-drag-data="obj" ng-center-anchor="{{centerAnchor}}"&gt;{{obj.title}}&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
  //Angular JS Controller                         
  
  var app = angular.module("myApp", [ "ui.calendar", "ngDraggable" ]);
  
  app.controller("myNgController", [ "$rootScope", "$scope", "$window",      "$document", "$timeout", "uiCalendarConfig",  
      function($rootScope, $scope, $window, $document, $timeout,  uiCalendarConfig) {
  
       $scope.dateRangesSOM = ["Jan 08, 2018 - Jan 12, 2018", "Jan 15, 2018 - Jan 19, 2018"]
       $scope.selectedDateRange = $scope.dateRangesSOM[0] ;        
       $scope.droppableObjectsDate = new Date();
          /**
           * Draggable objects code starts here
           */
  
  
          $scope.draggableObjects = [ {
              title : "Job Name One- #H",
              description : "Operation New Submittal",
              start: $scope.droppableObjectsDate,
              end : $scope.droppableObjectsDate,
              allDay : true
          }, {
              title : "Long Lead Time Name 2- #H",
              description : "Operation New Submittal",
              start : $scope.droppableObjectsDate,
              end : $scope.droppableObjectsDate,
              allDay : true
          }
  
          ];
  
          /**
           * Calendar code starts here
           */
  
          /*
           * Calendar 01
           */
  
          $scope.SelectedEvent = null;
  
  
  
          $scope.events = [];
          $scope.eventSources = [ $scope.events ];
  
  
          // Create dummy data
          var eventEntities = [ {
              title : "Job Name One- #H",
              description : "Operation New Submittaly",
              start :  $scope.droppableObjectsDate ,
              end :   $scope.droppableObjectsDate ,
              allDay : true
          }
          , {
              title : "Long Lead Time Name 2- #H",
              description : "Operation New Submittaly",
              start :   $scope.droppableObjectsDate ,
              end :   $scope.droppableObjectsDate ,
              allDay : true
          } ];
  
  
          // For existing events 
          angular.forEach(eventEntities, function(value, key) {
  
              console.log("Key is " + key + " Value is " + value);
              $scope.events.push({
                  title : value.title,
                  description : value.description,
                  start : value.start,
                  end : value.end,
                  allDay : value.allDay
              })
          });
  
  
          /**
           * Drop functionality
           */         
          $scope.onDropComplete1 = function(data, evt) {
              console.log("One Drop complete "+data + " "+evt.start);
  
              var index = $scope.events.indexOf(data);
  
              if (index == -1)
                  $scope.events.push(data);               
  
          }
  
  
          // Configure Calendar
  
          $scope.uiConfig = {
              // Configuring calendar, its look and feel
              calendar : {
  
                  // height : 450,
                  height : 200,
                  editable : true,
                  displayEventTime : true,
                  droppable: true, 
                  dropAccept:true,
                  draggable: true,
                  weekends:false,
                  eventOrder:"",
                  startEditable: true,
                  overlap : true,              
  
                  selectable:true,
                  selectHelper:true,
  
  
                  select: function(start, end){
                  console.log("Select event"+start);  
                  },
  
                  header : {
  
                      left : "basicWeek",
                      center : "",                        
                      right : ""
                  },
  
                  eventClick : function(event) {
                      console.log("Event eventClick...");
                      $scope.SelectedEvent = event;
                  },
  
                  eventRender: function(event, element, view){                    
  
                      console.log("eventRendered. view.start...."+view.start);
                      console.log("eventRendered. view.end...."+view.end);
                  },
  
  
                  eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view){
                      console.log("Event Droppped..."+event.start);
  
  
                  },
  
                  eventDragStop: function(event){
                      console.log("eventDragStop() event ..."+event.start);
                  },
  
                  eventDragStart: function(event){
                  console.log("eventDragStart() event ..."+event.start);
                  }
  
  
              }
  
          }
  
          /**
           * EOF
           */
      } ]);
  </code></pre>