How to reflect changes on an event in ui-calendar full calendar angularjs

Question

User2108892867 posted

Hello everyone, I am trying to update an event on my full calendar.  So if the title of the event is Test 123 and if I changed it to Test 456 and I want that change to reflect on the calendar after I click save button. This is the code that I used when it's in pure js code without using angularjs

 $('#calendar').fullCalendar('updateEvent', currentUpdateEvent);

But I am not sure how I could do that in ui-calendar. I tried to remove and replace the event array but still my calendar doesn't reflect the changes. Here is the link to ui calendar

http://angular-ui.github.io/ui-calendar/

Thanks

Answer 1

User283571144 posted

Hi asplearning,

According to ui-calendar article, you could use fullcalendar's eventRender option to customize how events are rendered in the calendar. However, only certain event attributes are watched for changes (they are id, title, url, start, end, allDay, and className).

Like  this:

    $scope.eventRender = function( event, element, view ) { 
        element.attr({'tooltip': event.title,
                     'tooltip-append-to-body': true});
        $compile(element)($scope);
    };
    /* config object */
    $scope.uiConfig = {
      calendar:{
        height: 450,
        editable: true,
        header:{
          left: 'title',
          center: '',
          right: 'today prev,next'
        },
        eventClick: $scope.alertOnEventClick,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize,
        eventRender: $scope.eventRender
      }
    };

Best Regards,

Brando