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

Question

我正在开发一个应用程序，我希望在用户预约时填充日历。因此，我在我的代码中集成了angular-ui-calendar。

我能够成功添加事件，并且还能够获取Angular-UI Calendar生成的唯一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++);

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