2016-04-22 1 views
1

Я использую директиву ui-calendar для полного календаря arshaw с перетаскиваемыми внешними событиями.Изменить информацию о событии FullCalendar (начало и конец) из ngDialog modal

Я хотел бы иметь возможность редактировать заголовок, начинать и заканчивать через текстовое поле во всплывающем диалоговом окне, не перетаскивая событие в самом календаре. Я использую ngDialog для модального и могу получить доступ к кликнутому событию через область контроллера. Название события в календаре отвечает на изменение, но времени начала и окончания нет.

Когда я нажимаю save в модуле, я передаю обновленную информацию функции ($scope.updateEventInfo), где я нахожу, что конкретный clientEvent по id, а затем обновляет свойства 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> 

ответ

0

Я возиться с этим календарем на прошлой неделе. То, что я делал для обновления определенного события, - это сращить существующее событие с массивом и нажать новое обновленное событие.

$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(); 
}; 

Я видел некоторых других людей, используя тот же метод и рассуждения что-то делать с календарным экземпляра и яваскрипта ссылки (я не эксперт).

редактировать:

На самом деле, я не понял метод, который вы использовали, и, вероятно, вытащил этот пример из устаревших версий.

я смог обновить событие и дату и время в частности, используя: uiCalendarConfig.calendars.festivalLineup.fullCalendar('updateEvent', clickedEvent);

все, что вам нужно сделать, это изменить 'clickedEvent' к 'clickedEvent[0]'

редактировать два:

Хорошо так Я больше общался с этим, и я понял, что да, вам нужно отформатировать дату в объект momentjs. Что-то вроде этого:

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