Modify FullCalendar Event Info (start and end) from ngDialog modal

Question

I am using the ui-calendar directive for arshaw's fullcalendar with draggable external events.

I would like to be able to edit the title, start and end through a textbox on a popup dialog without having to drag the event on the calendar itself. I am using ngDialog for the modal and can access the clicked event through the controller's scope. The event title on the calendar responds to the change but the start and end times do not.

When I click save in the modal I pass the updated info to a function ($scope.updateEventInfo) where I find that specific clientEvent by id, and then update the clientEvent properties.

I then call the fullCalendar updateEvent (.fullCalendar( 'updateEvent', event ))

The new title will render on calendar but the start and end times do not.

Is there a certain way I need to format or reassign the start and end times?

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>

Matthew Moran Matthew Moran · Accepted Answer · 2016-04-25T13:33:11

I have been messing around with this calendar for the past week. What I have been doing to update a specific event is to splice the existing event from the array and the push the newly updated event.

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

I saw some other people using the same method and the reasoning had something to do with the calendar instance and javascript references (I'm no expert).

edit:

Actually, I misunderstood the method you were using and probably pulled that example from outdated versions.

I was able to update an event and the dates and times specifically by using: uiCalendarConfig.calendars.festivalLineup.fullCalendar('updateEvent', clickedEvent);

all you need to do is change 'clickedEvent' to 'clickedEvent[0]'

edit two:

Okay so I was messing around with it more and I did realize that yes, you do have to format the date into a momentjs object. Something like this:

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

Modify FullCalendar Event Info (start and end) from ngDialog modal

1 Answers