3

我正在尝试将angular-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];

    }

在此先感谢您的帮助

4

1 回答 1

0

我知道这已经晚了 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>

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

我希望这可以帮助任何在同样问题上苦苦挣扎的人。

于 2017-07-28T17:08:14.073 回答