AngularUI / FullCalendar - 添加自定义事件

Question

我使用AngularUI Calendar / FullCalender并需要将自定义事件插入现有数组中。我以不同的方式尝试过它，但它没有用。我想将自定义事件插入＆＃34;事件＆＃34;然后将数组保存在数据库中。我究竟做错了什么？希望你能帮帮我..

这是我的代码：

HTML

  <div class="ibox float-e-margins" data-ng-controller="CalenderController as calender"><!-- start ibox -->
    <h2 class="text-navy">Termine</h2>
    <div class="ibox-content ibox-content-first ibox-content-nested no-margins"><!-- start ibox-content-nested -->
      <div class="btn-group calTools">
        <button type="button" class="btn btn-sm btn-primary" data-ng-click="addEvent()">
          Add Event
        </button>
        <div class="calAlert" ng-show="alertMessage != undefined && alertMessage != ''">
          <h4>{{alertMessage}}</h4>
        </div>
      </div>
      <ul class="unstyled no-padding margin-top-10">
          <li data-ng-repeat="e in events">
              <div class="alert alert-success">
                  <a class="close" data-ng-click="remove($index)"><i class="fa fa-times"></i></a>
                  <a class="close" data-ng-click="remove($index)"><i class="fa fa-check"></i></a>
                  <div class="form-group" id="datepicker_teilnehmer"><!-- start datepicker -->
                    <label class="font-normal" for="eventName">Wählen einen Eventnamen</label>
                    <div id="eventName" class="input-group">
                      <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
                      <input type="text" class="form-control" data-ng-model="e.title">
                    </div>
                    <label class="font-normal" for="eventStart">Wähle das Startdatum</label>
                    <div id="eventStart" class="input-group date" data-provide="datepicker">
                      <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                      <input type="text" class="form-control" data-ng-model="e.start">
                    </div>
                    <label class="font-normal" for="eventEnd">Wähle das Enddatum</label>
                    <div id="eventEnd" class="input-group date" data-provide="datepicker">
                      <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                      <input type="text" class="form-control" data-ng-model="e.end">
                    </div>
                    <label class="font-normal" for="eventTimeStart">Wähle die Uhrzeit</label>
                    <div id="eventTimeStart" class="input-group clockpicker">
                      <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                      <input type="text" class="form-control" data-ng-model="e.time | date: 'HH:mm:ss' ">
                    </div>
                  </div><!-- end datepicker -->
              </div>
          </li>
      </ul>
      <div ui-calendar="uiConfig.calendar" data-ng-model="eventSources"></div> <!-- id="calendar" class="calendar"  -->
    </div><!-- end ibox-content-nested -->
  </div><!-- end ibox -->

AngularJS

'use strict';

angular.module('inspinia')
.controller('CalenderController', function($scope, $log, $compile, uiCalendarConfig) {

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

/* event source that contains custom events on the scope */
$scope.events = [{
  title: 'All Day Event',
  start: new Date(y, m, d),
  end: new Date(y, m, d),
  time: new Date(t)
}];

/* alert on eventClick */
$scope.alertOnEventClick = function(date, jsEvent, view) {
  $scope.alertMessage = (date.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: 450,
    editable: true,
    header: {
      left: 'title',
      center: '',
      right: 'today prev,next'
    },
    eventClick: $scope.alertOnEventClick,
    eventDrop: $scope.alertOnDrop,
    eventResize: $scope.alertOnResize,
    eventRender: $scope.eventRender
  }
};

/* event sources array*/
$scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
$scope.eventSources2 = [$scope.calEventsExt, $scope.eventsF, $scope.events];

angular.element('.clockpicker').clockpicker();

// initialize slimScroll scrollbar
angular.element('.fc-scroller').slimScroll({
  alwaysVisible: true
  });

});