Angular ui-calendar drag and drop object

Question

i'm trying to use the angular-ui-calendar together angular-dragDrop to create something like the example from fullcalendar, where it's possible to drag external event into the calendar.
I already checked the How to drag&drop elements onto a calendar with angular directives only thread, but i could not figured out how to get the object that I dropped into the callendar and add to event's array.
Here is my trying

The view

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

The controller

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

}

Thanks in advance for the help

Did you find a solution to your problem? I am having the same issue, there is no example with ui-calendar and drag and drop to find... — Loukas Avramidis, Sep 01 '15 at 13:44
I came into a similar scenario for one of my projects, did anyone have any solution for this problem or any other library we can use? — Gaurav, Jun 14 '17 at 06:36

score 0 · Answer 1 · answered Jul 28 '17 at 17:08

I know this is 2 years late but I hope it can help someone else with the same problem.

I faced the same issue and managed to get it working in a slightly different way you're doing it in your code.

My controller:

$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);
        }
      }
    }

My HTML:

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

And that's how I managed to render an event in my calendar after I dropped it to the calendar.

I hope this helps anyone struggling with the same issue.

Angular ui-calendar drag and drop object

1 Answers1