0

I am using external events on an Angular ui-calendar:

HTML:

    <div id='external-events'>
          <ul>
            <li class='fc-event'>Event 1</li>
            <li class='fc-event'>Event 2</li>
            <li class='fc-event'>Event 3</li>
          </ul>
   </div>

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

Controller:

$scope.eventSources = [{
    events: [],
    color: '#428bca',
    textColor: 'white',
    overlap: false
  }]
$scope.uiConfig = {
    calendar: {
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'agendaDay,agendaTwoDay,week'
      },
      defaultView: 'agendaDay',
      height: 'auto',
      editable: true,
      droppable: true,
      eventOverlap: false,
      allDaySlot: false,
      slotDuration: '00:10:00',
      snapDuration: '00:05:00',
      eventReceive: $scope.eventReceived,
      eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) {
        $scope.eventDropped(event, delta); 
      },
      eventClick: $scope.eventClicked
    }
  };

I would like to get all of the events on the calendar on save. I know that you can use clientEvents while using fullCalendar by itself:

$('#calendar').fullCalendar('clientEvents');

Is there an equivalent for ui-calendar? I guess I am asking what syntax to use to access the clientEvents. I cannot figure it out. Another option I tried was pushing each event into $scope.eventSources[0].events but it doesn't seem right to have to do that.

yam55
  • 1,541
  • 2
  • 11
  • 12

1 Answers1

0

I believe I figured out my own question.

I had to user the value of the calendar attribute in the HTML (calendar = myCalendar) and refer to it using uiCalendarConfig. It returns an array of all of the events on the calendar. I am new to angular and not too familiar with directives.

var myCalendar = uiCalendarConfig.calendars.myCalendar

myCalendar.fullCalendar('clientEvents', function(event) {
   return event
});
yam55
  • 1,541
  • 2
  • 11
  • 12