Angular ui-calendar 拖放对象

Question

我正在尝试将angular-ui-calendar 与angular-dragDrop 一起使用来创建类似于fullcalendar 中的示例的内容，其中可以将外部事件拖到日历中。
我已经检查了How to drag&drop elements onto a calendar with angular directives only 线程，但我不知道如何获取我放入 callendar 并添加到事件数组的对象。
Here is my trying

• 景色

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

这就是我在将事件拖放到日历后设法在日历中呈现事件的方式。

我希望这可以帮助任何遇到同样问题的人。