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>