Angular ui-calendar drag and drop object

I'm trying to use angular-ui-calendar together with angular-dragDrop to create something like an example from fullcalendar where an external event can be dragged onto a calendar.
 I already checked How to drag and drop items and items into a calendar using angular directives , but I couldn't figure out how to get the object that I got the calendar into and add to the event array.
Here are my attempts

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


  • 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 your help

+3


source to share


1 answer


I know this is for 2 years, but I hope this helps someone else with the same problem.

I ran into the same problem and managed to get it to work a little differently than you do 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 how did I manage to display the event in my calendar after I dropped it into the calendar.

I hope this helps anyone who is struggling with the same problem.

0


source







All Articles