Угловой UI-календарь перетаскивания объекта

Question

Я пытаюсь использовать http://angular-ui.github.io/ui-calendar/ вместе angular-dragDrop, чтобы создать что-то вроде примера из fullcalendar, где можно перетаскивать внешние события в календарь.
Я уже проверил, как перетаскивать элементы в календарь, используя только угловые директивы, но я не мог понять, как получить объект, который я перетащил в callendar, и добавить в массив события.
Вот мои попытки

• Вид

  <div id="wrap">
      <div id="external-events">
          <h4>Draggable Events</h4>
          <label ng-repeat="item in eventList">
               <div class="fc-event" data-drag="true" 
                    data-jqyoui-options="{revert: 'invalid'}"  
                    jqyoui-draggable="{index: {{$index}},placeholder:true,animate:true}">{{item.title}}</div>
           </label>
  
  
        </div>
        <br />
       <div style="clear:both"></div>
       <div class="calendar" 
            ng-model="eventSources" 
            calendar="myCalendar1" 
            ui-calendar="uiConfig.calendar"
            data-drop="true" 
           jqyoui-droppable="{multiple:true}"></div>
  
  </div>
  

  
  

• Контроллер

  app.controller('MainCtrl', function($scope) {
  
  
     var date = new Date();
     var d = date.getDate();
     var m = date.getMonth();
     var y = date.getFullYear();
  
  
     $scope.eventList=[
             {title:'Event 1'},
             {title:'Event 2'},
             {title:'Event 3'},
             {title:'Event 4'}
      ];
  
     $scope.eventSources=[];
  
     $scope.events = [
            {title: 'All Day Event',start: new Date(y, m, 1)},
            {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
            {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
      ];
  
      $scope.uiConfig = {
          calendar:{
              height: 450,
              editable: true,
              droppable: true,
              drop: function (date, allDay, jsEvent, ui) {
                  console.log('Here ,but where is the object?');
              },
           header:{
               left: 'title',
               center: '',
               right: 'today prev,next'
           }
         }
   };
  
   $scope.eventSources = [$scope.events];
  

  }

Заранее спасибо за помощь

Answer 1

Я знаю, что это на 2 года позже, но я надеюсь, что это может помочь кому-то еще с той же проблемой.

Я столкнулся с той же проблемой и сумел заставить ее работать немного иначе, чем вы делаете это в своем коде.

Мой контроллер:

$scope.eventSources = [{
  // Each time an element is dropped in the calendar this event will fire
  events (start, end, _, callback) {
    start = moment().startOf('month');
    end = moment().endOf('month');
    // In my case I have many events I'd like to render, so I make a call to my server to get them
    $http.get('/calendar_event').then(function (data) {
      let events = [];
      angular.forEach(data.data,function(e){
        events.push({
          title: 'Some Event',
          start: moment(e.start_date),
          end: moment(e.end_date)
        });
      });
      // This callback calls eventRender in $scope.uiConfig
      callback(events);
    });
  }
}];    

     $scope.uiConfig = {
      calendar: {
        // calendar configurations...
        droppable: true,
        drop: function(date,jsEvent,ui,resourceId){
          // Here, in my case, I make a call to my server and 
          // store information in the database
        },
        eventRender: function (event, element, view) {
          // This function renders the event in the calendar
          let content = $('.fc-content', element).first();
          content.empty();
          let append = '';
          let append = '';
          append += '<div>';
          let title = 'Some Title';
          append += `<p><b>${title}</b></p>`;
          append += '</div>';
          // Here I make an HTML element that will be inserted in the day I dropped it at the calendar
          content.append(append);
        }
      }
    }

Мой HTML:

<div ui-calendar="uiConfig.calendar" ng-model="eventSources" class="calendar" calendar="calendar"></div>

И вот как мне удалось отобразить событие в моем календаре после того, как я поместил его в календарь.

Я надеюсь, что это поможет любому, кто борется с той же проблемой.