從ngDialog模式修改FullCalendar事件信息（開始和結束）

我正在使用帶有可拖動外部事件的arshaw fullcalendar的ui-calendar指令。從ngDialog模式修改FullCalendar事件信息（開始和結束）

我希望能夠通過彈出對話框上的文本框來編輯標題，開始和結束，而不必在日曆本身上拖動事件。我使用ngDialog作爲模式，並可以通過控制器的作用域訪問點擊事件。日曆上的事件標題會響應更改，但開始和結束時間不會。

當我點擊模式保存時，我將更新後的信息傳遞給一個函數（$scope.updateEventInfo），我通過id找到特定的clientEvent，然後更新clientEvent屬性。

我然後調用fullCalendar updateEvent（.fullCalendar('updateEvent', event)）

新標題將呈現在日曆上，但開始和結束時間沒有。

是否有某種方法需要格式化或重新分配開始和結束時間？

控制器：

$scope.updateEventInfo = function(clickedEvent) { 
     var newTitle = clickedEvent.title; 
     var newStart = clickedEvent._start; 
     var newEnd = clickedEvent._end; 
     var clientEvent = uiCalendarConfig.calendars.myCalendar.fullCalendar('clientEvents', clickedEvent._id); 
     clientEvent[0].title = clickedEvent.title; 
     clientEvent[0].start = newStart; 
     clientEvent[0].end = newEnd; 
     uiCalendarConfig.calendars.festivalLineup.fullCalendar('updateEvent', clickedEvent); 
     } 

    $scope.eventSources = [{ 
     events: [], 
     color: '#428bca', 
     textColor: 'white', 
     overlap: false 
     }] 
    $scope.uiConfig = { 
     calendar: { 
      header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'agendaDay,agendaTwoDay,week' 
      }, 
      defaultView: 'agendaDay', 
      height: 'auto', 
      editable: true, 
      droppable: true, 
      eventClick: function(clickedEvent) { 
      $scope.clickedEvent = clickedEvent; 
      $scope.openModal('EditCalendarEvent'); 
      }, 
     } 
     };

ngDialog代碼：

<div class="modal-container">  
    <h4>{{clickedEvent.title}}</h4> 
    <form> 
     <div class="input-field"> 
     <input id="eventTitle" type="text" ng-model="clickedEvent.title"/> 
     <label for="eventTitle">Event Title</label> 
     </div> 
     <div class="input-field"> 
     <input id="startTime" type="text" ng-model="clickedEvent.start"/> 
     <label for="startTime">Event Start</label> 
     </div> 
     <div class="input-field"> 
     <input id="endTime" type="text" ng-model="clickedEvent.end"/> 
     <label for="endTime">Event End</label> 
    </div> 
    </form> 
     <button type="button" ng-click="updateEventTimes(clickedEvent)">Save</button> 
</div>

來源

2016-04-22 yam55

我一直在與此日曆在過去的一週瞎搞。我一直在做什麼來更新一個特定的事件是拼接數組中的現有事件並推送新更新的事件。

$scope.saveEvent = function() { 
    $scope.events.forEach(function(ev) { 
     if (ev._id == $scope.selectedEvent._id) { 
      $scope.events.splice($scope.events.indexOf(ev),1); 
     } 
    }); 
    $scope.events.push($scope.selectedEvent); 
    $scope.closeModal(); 
};

我看到用同樣的方法其他一些人的推理有事可做與日曆實例和javascript引用（我不是專家）。

編輯：

其實，我誤解你使用的方法和可能拉從過時的版本的例子。

我能夠通過使用專門更新事件的日期和時間：uiCalendarConfig.calendars.festivalLineup.fullCalendar('updateEvent', clickedEvent);

所有你需要做的是改變'clickedEvent'到'clickedEvent[0]'

編輯二：

好了，我更多地搞亂了它，而且我意識到是的，你必須將日期格式化爲一個時刻對象。類似這樣的：

var newStart = moment(clickedEvent.start, , "MM/DD/YYYY HH:mm")

來源

2016-04-25 13:33:11 mtmoran

從ngDialog模式修改FullCalendar事件信息（開始和結束）

回答

相關問題