angularjs - How to update event source object to particular event source in full calendar dynamically

Question

Hello I have loaded one calendar using below code.

dataFactory.httpRequest('getCalanderTaskData','GET').then(function(data) {
            $scope.taskCalanderDailyTask = data.dailyTask;
            $scope.taskCalanderDueTask = data.dueTask;
            $scope.fullCalendarEventSources = {
                dailyTask : {
                    events:$scope.taskCalanderDailyTask,
                    textColor : '#000',
                    backgroundColor: '#FFD000',
                },
                dueTask : {
                    events:$scope.taskCalanderDueTask,
                    textColor : '#fff',
                    backgroundColor: '#da1445',  
                }

            };
            $('#fullcalendar').fullCalendar({

                eventClick: function(calEvent, jsEvent, view) {
                },
                eventMouseover: function(calEvent, jsEvent, view) {
                    var tooltip = '<div class="tooltipevent" style="color:#fff;width:100px;height:50px;background:#125688;position:absolute;z-index:10001;">' + calEvent.title + '</div>';
                    var $tooltip = $(tooltip).appendTo('body');
                    $(this).mouseover(function(e) {
                        $(this).css('z-index', 10000);
                        $tooltip.fadeIn('500');
                        $tooltip.fadeTo('10', 1.9);
                    }).mousemove(function(e) {
                        $tooltip.css('top', e.pageY + 10);
                        $tooltip.css('left', e.pageX + 20);
                    });
                },
                eventMouseout: function(calEvent, jsEvent) {
                    $(this).css('z-index', 8);
                    $('.tooltipevent').remove();
                },
                eventLimit: 3,
                eventSources: [$scope.fullCalendarEventSources.dailyTask, $scope.fullCalendarEventSources.dueTask],

            });

      });

Above code load first time calendar now when any new task going to added I want to refresh calendar event source without reload page.

Below is the code for saveTask Inside that I have written code for dynamic event source which also remove source and added source but it not update newly added tasks.

$scope.saveTask = function(){
        $scope.form.taskLeadId =  $scope.leadId;
        $scope.form.taskId =  $scope.editTaskId;
        if($scope.form.taskLeadId != "undefined" && $scope.form.taskLeadId != "")
        {
            dataFactory.httpRequest('taskCreate','POST',{},$scope.form).then(function(data) {
                if(data.status == 1)
                {
                    alertify.notify(data.message, 'success', 5, function(){});
                    $scope.addTask.$setPristine();
                    $scope.addTask.$setUntouched();
                    $scope.form = {};
                    $(".modal").modal("hide");
                    getDailyTaskData();
                    getCalanderTaskData();
                    console.log("updateed=="+$scope.taskCalanderDailyTask);
                    $scope.fullCalendarEventSources = {
                        dailyTask : {
                            events:$scope.taskCalanderDailyTask,
                            textColor : '#000',
                            backgroundColor: '#FFD000',
                        },
                        dueTask : {
                            events:$scope.taskCalanderDueTask,
                            textColor : '#fff',
                            backgroundColor: '#da1445',  
                        }

                    };
                $timeout(function () {
                    $('#fullcalendar').fullCalendar('removeEventSource',$scope.fullCalendarEventSources.dailyTask);
                    console.log("updateed=="+$scope.taskCalanderDailyTask);
                    $('#fullcalendar').fullCalendar('addEventSource',$scope.fullCalendarEventSources.dailyTask);
                    $('#fullcalendar').fullCalendar('refetchEventSources',$scope.fullCalendarEventSources.dailyTask);
                    $('#fullcalendar').fullCalendar('rerenderEvents');
                    $('#fullcalendar').fullCalendar('refetchEvents');
                    $('#fullcalendar').fullCalendar('refresh');
                    $('#fullcalendar').fullCalendar('updateEvents',$scope.fullCalendarEventSources.dailyTask);
                        $('#fullcalendar').fullCalendar('rerenderEvents');
                    $('#fullcalendar').fullCalendar('refetchEvents');
                    $('#fullcalendar').fullCalendar('refresh');
                    console.log("after update==");
                });



                    //alertify.alert('Task', 'Congratulations your task is created successfully!');

                }
                else
                {
                    if($scope.editTask = "edit")
                    {
                        alertify.alert('Task Update','Nothing is updated');
                    }
                    else
                    {
                        alertify.alert('Error', data.message,function(){ alertify.error(data.message)});
                        $(".modal").modal("hide");
                    }
                }
            });
        }
        else
        {
            alertify.alert('Error', 'There must be something went wrong please try again later');
            $(".modal").modal("hide");
        }
    }

Any one please help on this.

Answer 1

Waitting for answers