Angular-UI日历​​：添加事件时没有获得唯一的ID

Question

我正在开发一个应用程序，我想在其中使用用户约会来填充日历。因此，为此我在我的代码中集成了 angular-ui-calendar。

我能够成功添加事件，还能够获取 Angular-UI 日历生成的唯一 ID。但是，当我使用以下方法从不同的视图跳转到特定日期时，问题就来了。

$scope.gotoCalendar = function(date) {
     Events.get().then(function(response) {
         $scope.events.splice(0);
         for (var i = 0; i < response.length; i++) {
             $scope.events.push(response[i]);
         }

         uiCalendarConfig.calendars['myCalendar'].fullCalendar('gotoDate', date);
         $state.go('booking.calendar');
     });
 };

现在，当我尝试添加另一个事件时，angular-ui-calendar 正在分配相同的 id。

在下面给出的截图中，0th item and 3rd item 得到了相同的 id。现在，当用户尝试更新事件时，具有相同 id 的事件也会得到更新。

这是我的控制器代码

    $scope.addEvent = function(appointment) {
     var endDate = appointment.endDate;
     var endTime = appointment.endTime;
     var endTimeHours = endTime.getHours();
     var endTimeMinutes = endTime.getMinutes();


     var startDate = appointment.startDate;
     var startTime = appointment.startTime;
     var startTimeHours = startTime.getHours();
     var startTimeMinutes = startTime.getMinutes();

     var formattedEndDate = new Date(moment.utc(setHoursMinutes(endDate, endTimeHours, endTimeMinutes)).format());
     var formattedStartDate = new Date(moment.utc(setHoursMinutes(startDate, startTimeHours, startTimeMinutes)).format());

     if (formattedStartDate.getTime() >= formattedEndDate.getTime()) {
         $scope.showAlert('Cannot save Event', 'Start date must be before the end date');
         return;
     }


     Events.add(appointment);

     Events.get().then(function(response) {
         $scope.events.splice(0);

         console.log('[addEvent]response : :', response);

         for (var i = 0; i < response.length; i++) {
             $scope.events.push(response[i]);
         }

         $scope.myAppointments = angular.copy($scope.events);
     });
     $scope.appointment = { title: '', startDate: '', startTime: '', endDate: '', endTime: '' };
     $scope.closeModal();

 };

 $scope.gotoCalendar = function(date) {
     Events.get().then(function(response) {
         $scope.events.splice(0);
         for (var i = 0; i < response.length; i++) {
             $scope.events.push(response[i]);
         }

         uiCalendarConfig.calendars['myCalendar'].fullCalendar('gotoDate', date);
         $state.go('booking.calendar');
     });
 };


 /* Change View */
 $scope.changeView = function(view, calendar) {
     console.info('changeView 1', $scope.events);

     Events.get().then(function(response) {
         $scope.events.splice(0);

         console.log('changeView [response] : :', response);

         for (var i = 0; i < response.length; i++) {
             $scope.events.push(response[i]);
         }


         uiCalendarConfig.calendars[calendar].fullCalendar('changeView', view);

     });
 };


 /* Change View */
 $scope.renderCalender = function(calendar) {
     console.info('Rendering Calendar...');
     if (uiCalendarConfig.calendars[calendar]) {
         uiCalendarConfig.calendars[calendar].fullCalendar('render');
     }
 };



 $scope.OnDayClick = function(date, jsEvent, view) {

     var formattedDate = new Date(date);
     $scope.appointment = {
         startDate: formattedDate,
         startTime: formattedDate
     };

     $scope.appointment.minEndDate = moment($scope.appointment.startDate).format().split('T')[0];
     $scope.openModal();
 };




 /* event sources array*/
 $scope.eventSources = [$scope.events];

 /* config object */
 $scope.uiConfig = {

 calendar: {
     height: 450,
     editable: true,
     defaultView: "agendaDay",
     ignoreTimezone: true,
     eventDurationEditable: false,
     defaultDate: new Date(),
     allDay: false,
     allDayDefault: false,
     allDaySlot: false,
     timezone: 'local',
     eventOverlap: false,
     header: {
         left: 'title',
         center: '',
         right: 'today prev,next'
     },
     dayClick: $scope.OnDayClick,
     eventClick: $scope.OnEventClick,
     eventDrop: $scope.OnDrop,
     eventRender: $scope.eventRender
 }

那么，我该如何解决这个问题呢？希望我能解释我的问题。

Answer 1

虽然我无法为您提供确切的答案，但我们在学校项目中遇到了同样的问题。经过多次挫折后，我们修改了fullcalendar.js（angular-ui-calendar 依赖项）中的一些代码，解决了获取唯一 ID 的问题，但是我们仍然遇到拖放和重复 ID 的问题，并且不得不禁用编辑。

原始代码：

out._id = input._id || (input.id === undefined ? '_fc' + eventGUID++ : input.id + '');      

修改后的代码：

if (!input._id && input.id) {
    input._id = ++eventGUID * -1;
}

out._id = input._id || (input.id === undefined ? '_fc' + eventGUID++ : eventGUID++);

我没时间想出一个更强大的解决方案，但它达到了目的。