2016-04-22 9 views
1

Ich verwende die UI-Kalender-Direktive für Arshaw Fullcalendar mit ziehbaren externen Ereignissen.Ändern FullCalendar Event Info (Start und Ende) von ngDialog modal

Ich würde gerne in der Lage sein, den Titel zu bearbeiten, zu starten und zu beenden, durch ein Textfeld in einem Popup-Dialog, ohne das Ereignis auf den Kalender selbst ziehen zu müssen. Ich verwende ngDialog für das Modal und kann über den Bereich des Controllers auf das angeklickte Ereignis zugreifen. Der Ereignistitel im Kalender reagiert auf die Änderung, aber die Start- und Endzeiten nicht.

Wenn ich im Modal auf Speichern klicke, übergebe ich die aktualisierte Information an eine Funktion ($scope.updateEventInfo), wo ich dieses spezifische clientEvent nach ID finde und dann die clientEvent Eigenschaften aktualisiere.

Ich rufe dann die fullCalendar Updateevent (.fullCalendar('updateEvent', event))

Der neue Titel auf dem Kalender übertragen werden, aber die Start- und Endzeiten nicht.

Gibt es eine bestimmte Art und Weise, wie ich die Start- und Endzeiten formatieren oder neu zuweisen muss?

Controller:

$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 Code:

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

Antwort

0

Ich habe um mit diesem Kalender für die vergangene Woche durcheinander. Was ich getan habe, um ein bestimmtes Ereignis zu aktualisieren, besteht darin, das vorhandene Ereignis vom Array zu splitten und das neu aktualisierte Ereignis zu schieben.

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

sah ich einige andere Leute mit der gleichen Methode und die Argumentation hatte etwas mit der Kalender-Instanz und JavaScript-Referenzen zu tun (ich bin kein Experte).

edit:

Eigentlich habe ich die Methode falsch verstanden Sie verwendet haben, und zog wahrscheinlich, dass beispielsweise von veralteten Versionen.

konnte ich ein Ereignis und die Daten und Zeiten unter Verwendung speziell aktualisieren:

alles, was Sie ändern 'clickedEvent' zu 'clickedEvent[0]'

bearbeiten zwei tun müssen uiCalendarConfig.calendars.festivalLineup.fullCalendar('updateEvent', clickedEvent);:

Okay, so Ich habe mehr damit herumgespielt und mir wurde klar, dass man das Datum in ein Moment-Objekt formatieren muss. Etwas wie dieses:

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