javascriptangularjsangular-bootstrap-calendar

Angular bootstrap calendar doesnt update view after adding or updating events


I am using mattlewis bootstrap calendar.Events are displaying correctly.But if i add new event to calendar it duplicates the events in other dates instead of adding event to the added date.Only after refreshing the page everything works fine.I tried $scope.$apply also.But nothing seems to work.

Here is my html

<mwl-calendar events="events" view="calendarView" 
    view-date="viewDate" view-title="calendarTitle"
    on-event-click="eventClicked(calendarEvent)"
    on-event-times-changed="eventTimesChanged(calendarEvent);
    calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
    cell-is-open="cellIsOpen" day-view-start="06:00"
    day-view-end="22:59" day-view-split="30"
    cell-modifier="cellModifier(calendarCell)"
    on-event-click="eventClicked(calendarEvent)"
    cell-auto-open-disabled="true"
    on-timespan-click="timespanClicked(calendarDate, calendarCell)">
</mwl-calendar>

Controller.js

$scope.events = [];
$scope.myevents = function(start, end, timezone, callback) {
    SalesNotifyService.getAllNotify().then(function(response) {
        $scope.allleadnotify  = response.data;
        console.log($scope.allleadnotify);
        var events = [];
        angular.forEach($scope.allleadnotify,function(event,key){
            var today = new Date();
            var notifyDates = new Date(event.notifyDate);
            if(event.leadName!=null){
                $scope.events.push({
                    title: event.notifyType,
                    startsAt : event.notifyDate,
                    endsAt : event.notifyEndDate,
                    withoffender: event.leadName,
                });
            } else {
                $scope.events.push({
                    title: event.notifyType,
                    startsAt : event.notifyDate,
                    endsAt : event.notifyEndDate,
                    withoffender: '',
                });
            }
        });
    });
}

Now after save i am calling $scope.myevents function like this

SalesNotifyService.saveNotify(notify).then(function(response){
    $scope.notify = response.data;
    $scope.myevents();
});

But even if i call myevents function events are not populating in calendar properly.If i already have events then after adding new event the old events are duplicating and displaying.If i reload the page then everything is fine.In html i am calling myevents function in ng-init.Can anyone tell how to display events properly after adding the event without reloading the page?


Solution

  • Maybe you need to reset the $scope.events to empty array before adding events again? If you don't do this then everytime you call $scope.myevents() you're adding events again in the same array without removing them. so in $scope.myevents do $scope.events=[] at the start of the function

    $scope.events = events; and push events into the local "events" array.