javascript - Angular-UI 日历 : Not getting unique id when adding an event

Question

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

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

$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。

在下面给出的屏幕截图中，第 0 个项目和第 3 个项目 具有相同的 id。现在，当用户尝试更新事件时，具有相同 id 的事件也会更新。

这是我的 Controller 代码

    $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++);

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