事件未顯示在Anglular UI-Calender中

Question

我正在嘗試使用Angular UI日歷： http : //angular-ui.github.io/ui-calendar/

我實現了所有步驟，但是來自API的事件信息未顯示在日歷上。

以下是我的HTML：

<div class="btn-toolbar">
  <div class="btn-group">
    <button class="btn btn-success" ng-click="changeView('agendaDay', 'myCalendar1')">Day</button>
    <button class="btn btn-success" ng-click="changeView('agendaWeek', 'myCalendar1')">Week</button>
    <button class="btn btn-success" ng-click="changeView('month', 'myCalendar1')">Month</button>
  </div>
</div>
<div class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar" ng-click="alertOnEventClick();">
</div>

以下是我的控制器代碼：

$scope.events=[];

$http.get("/ABC/ABC", {
  params: {
    "calenderView": 1
  }
}).success(function(data, status, headers, config) {
  //Declared Array for Data.

  for(var i=0; i< data.eventCalender.length; i++){
    $scope.events.push = {
      title:data.eventCalender[i].title,
      start:data.eventCalender[i].start,
      end:data.eventCalender[i].end
    }
  }

}).
error(function(data, status, headers, config) {
  SpinnerSvc.hide('globalSpinner');
});

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

$scope.changeTo = 'Hungarian';
/* event source that pulls from google.com */
$scope.eventSource = {
  className: 'gcal-event',           // an option!
  currentTimezone: 'America/Chicago' // an option!
};
/* event source that contains custom events on the scope */
/* event source that calls a function on every view switch */
$scope.eventsF = function (start, end, timezone, callback) {
  var s = new Date(start).getTime() / 1000;
  var e = new Date(end).getTime() / 1000;
  var m = new Date(start).getMonth();
  var events = [{title: 'Feed Me ' + m,start: s + (50000),end: s + (100000),allDay: false, className: ['customFeed']}];
  callback(events);
};


/* alert on eventClick */
$scope.alertOnEventClick = function( date, jsEvent, view){
    $scope.alertMessage = ($scope.title + ' was clicked ');
};
/* alert on Drop */
 $scope.alertOnDrop = function(event, delta, revertFunc, jsEvent, ui, view){
   $scope.alertMessage = ('Event Dropped to make dayDelta ' + delta);
};
/* alert on Resize */
$scope.alertOnResize = function(event, delta, revertFunc, jsEvent, ui, view ){
   $scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
};
/* add and removes an event source of choice */
$scope.addRemoveEventSource = function(sources,source) {
  var canAdd = 0;
  angular.forEach(sources,function(value, key){
    if(sources[key] === source){
      sources.splice(key,1);
      canAdd = 1;
    }
  });
  if(canAdd === 0){
    sources.push(source);
  }
};
/* add custom event*/
$scope.addEvent = function() {
  $scope.events.push({
    title: 'Open Sesame',
    start: new Date(y, m, 28),
    end: new Date(y, m, 29),
    className: ['openSesame']
  });
};
/* remove event */
$scope.remove = function(index) {
  $scope.events.splice(index,1);
};
/* Change View */
$scope.changeView = function(view,calendar) {
  uiCalendarConfig.calendars[calendar].fullCalendar('changeView',view);
};
/* Change View */
$scope.renderCalendar = function(calendar) {
  $timeout(function() {
    if(uiCalendarConfig.calendars[calendar]){
      uiCalendarConfig.calendars[calendar].fullCalendar('render');
    }
  });
};
 /* Render Tooltip */
$scope.eventRender = function( event, element, view ) {
    element.attr({'tooltip': event.title,
                  'tooltip-append-to-body': true});
    $compile(element)($scope);
};
/* config object */
$scope.uiConfig = {
  calendar:{
    height: 480,
    editable: true,
    header:{
      left: 'title',
      center: '',
      right: 'prev,next'
    },
    eventClick: $scope.alertOnEventClick,
    eventDrop: $scope.alertOnDrop,
    eventResize: $scope.alertOnResize,
    eventRender: $scope.eventRender
  }
};

$scope.changeLang = function() {
  if($scope.changeTo === 'Hungarian'){
    $scope.uiConfig.calendar.dayNames = ["Vasárnap", "Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek", "Szombat"];
    $scope.uiConfig.calendar.dayNamesShort = ["Vas", "Hét", "Kedd", "Sze", "Csüt", "Pén", "Szo"];
    $scope.changeTo= 'English';
  } else {
    $scope.uiConfig.calendar.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    $scope.uiConfig.calendar.dayNamesShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    $scope.changeTo = 'Hungarian';
  }
};
/* event sources array*/
$scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
$scope.eventSources2 = [$scope.calEventsExt, $scope.eventsF, $scope.events];
//}

Answer 1

將新事件推送到$scope.events數組時，會出現語法錯誤。 嘗試這個：

...
for(var i=0; i< data.eventCalender.length; i++){
  $scope.events.push({
    title:data.eventCalender[i].title,
    start:data.eventCalender[i].start,
    end:data.eventCalender[i].end
  });
}
...

現在，您只需將數組push函數重新分配給事件對象。