on click of next and previous button FullCalendar comes to the agenda View

Question

I am trying to work with full calendar in a angular 1 and i am done with showing events,

when I tried adding events on next and previous button clicks , also I got the response from server but when the events are assigned to FullCalendar events it goes back to default view or whatever agenda is for example, if the view is day view and when I click on previous button it goes to previous day and when the events come from the server it comes back to today's view. Following is the code which might give you the clear idea of what I am doing.

HTML

<div id="demoCalender" fc fc-options="calendarOptions">

Angular

$scope.defaultViewAgenda = "agendaDay";

$scope.calendarOptions = {
    height: get_calendar_height(100),        
    header: {
        left: 'title',
        center: 'today',
        right: 'prev,agendaDay,agendaWeek,month,next'
    },
    buttonText: {
        today: 'Today',
        month: 'Month',
        week: 'Week',
        day: 'Day',
        list: 'List'
    },
    defaultTimedEventDuration: '00:45:00',
    forceEventDuration: false,        
    defaultView: $scope.defaultViewAgenda,
    firstHour: 09,        
    themeSystem: 'standard',
    windowResize: function (view) {            
        $('#demoCalender').fullCalendar('option', 'height', get_calendar_height(117));
        $('#demoCalender').fullCalendar('rerenderEvents');
    },
    viewRender: function (view) {
        console.log(view);
    },
    events: [],
    viewDisplay: function (element) {
        console.log(element);
    }
};

the FullCalendar options. and events are by default empty and when server response comes from the server method calls from my below function the events are shown in the calendar

$scope.getAgendaReschedules = function (agenda, startTime, endTime, isAgendaNextOrPrevious) {
    demoReschedules.getRescheduls($scope.assignedAgentId, "RESCHEDULED", startTime, endTime).then(function (response) {
        if (response.status == 200) {
            if (response.data.length > 0) {
                var groupByScheduledContacts = response.data.reduce(function (result, current) {
                    result[current.scheduled] = result[current.scheduled] || [];
                    result[current.scheduled].push(current);
                    return result;
                }, {});

                $scope.events = [{}];

                for (key in groupByScheduledContacts) {
                    var eventTime = moment(key, "DD/MM/YYYY HH:mm:ss");
                    $scope.events.push({
                        title: 'No. of rescheduled call : ' + groupByScheduledContacts[key].length,
                        start: eventTime,
                        end: eventTime,
                        description: 'This is a cool event',
                        color: $scope.getColorForReschedules(eventTime)
                    });
                }

                $scope.calendarOptions.events = $scope.events;

                if (isAgendaNextOrPrevious == false) {
                    $scope.calendarOptions.defaultView = agenda;
                }                    
            }
            else {
                $scope.calendarOptions.events.push({});
                $scope.calendarOptions.defaultView = agenda;                    
            }
        }            
    }, function err() { });

};  

and clicking on agenda buttons like week, month and day I am calling same method above and when I am doing same with next and previous button clicks it comes to the today's view. If the agenda is day or if the agenda view is week then it comes to this week and same for month is happening.

Below is the code for next and previous button click.

In this the $scope.tempViewAgenda is the temp var value which I am setting on day, week or month agenda button clicks.

$('#demoCalender').fullCalendar().on('click', '.fc-prev-button', function () {
    switch ($scope.tempViewAgenda) {
        case "agendaDay":
            //alert("Prev Day");                
            $scope.getPreviousAgendaReschedules('d');
            break;

        case "agendaWeek":
            $scope.getPreviousAgendaReschedules('w');
            //alert("Prev Week");
            break;

        case "month":
            $scope.getPreviousAgendaReschedules('m');
            //alert("Prev Month");
            break;
    }
});

$('#demoCalender').fullCalendar().on('click', '.fc-next-button', function () {
    switch ($scope.tempViewAgenda) {
        case "agendaDay":
            $scope.getNextAgendaReschedules('d');
            break;

        case "agendaWeek":
            $scope.getNextAgendaReschedules('w');
            //alert("Next Week");
            break;

        case "month":
            $scope.getNextAgendaReschedules('m');
            //alert("Next Month");
            break;
    }
});


//previous agenda reschedules
$scope.getPreviousAgendaReschedules = function (agendaStartCharacterToSubtract) {
    $scope.startDate = moment($scope.startDate).subtract(1, agendaStartCharacterToSubtract).format('YYYY-MM-DD HH:mm:ss');
    $scope.endDate = moment($scope.endDate).subtract(1, agendaStartCharacterToSubtract).format('YYYY-MM-DD HH:mm:ss');
    console.log("Previous : start date : " + $scope.startDate + " End date : " + $scope.endDate);
    $scope.getAgendaReschedules($scope.tempViewAgenda, $scope.startDate, $scope.endDate, true);
};

//next agenda reschedules
$scope.getNextAgendaReschedules = function (agendaStartCharacterToAdd) {
    $scope.startDate = moment($scope.startDate).add(1, agendaStartCharacterToAdd).format('YYYY-MM-DD HH:mm:ss');
    $scope.endDate = moment($scope.endDate).add(1, agendaStartCharacterToAdd).format('YYYY-MM-DD HH:mm:ss');
    console.log("Next : start date : " + $scope.startDate + " End date : " + $scope.endDate);
    $scope.getAgendaReschedules($scope.tempViewAgenda, $scope.startDate, $scope.endDate, true);
};

Is there anyone here to figure it out?

Answer 1

I got an answer to this issue that whenever i am going to assign the events its reinitialize so i need to set the default date and agenda view to show the fetched events like

$scope.getAgendaReschedules = function (agenda, startTime, endTime, isAgendaNextOrPrevious) {
    demoReschedules.getRescheduls($scope.assignedAgentId, "RESCHEDULED", startTime, endTime).then(function (response) {
        if (response.status == 200) {
            if (response.data.length > 0) {
                var groupByScheduledContacts = response.data.reduce(function (result, current) {
                    result[current.scheduled] = result[current.scheduled] || [];
                    result[current.scheduled].push(current);
                    return result;
                }, {});

                $scope.events = [{}];

                for (key in groupByScheduledContacts) {
                    var eventTime = moment(key, "DD/MM/YYYY HH:mm:ss");
                    $scope.events.push({
                        title: 'No. of rescheduled call : ' + groupByScheduledContacts[key].length,
                        start: eventTime,
                        end: eventTime,
                        description: 'This is a cool event',
                        color: $scope.getColorForReschedules(eventTime)
                    });
                }

                $scope.calendarOptions.events = $scope.events;

                if (isAgendaNextOrPrevious) {
                    $scope.calendarOptions.defaultDate = moment(startTime);
                    $scope.calendarOptions.defaultView = agenda;
                }
                else {
                    $scope.calendarOptions.defaultDate = moment(startTime);
                    $scope.calendarOptions.defaultView = agenda;
                }
            }
            else {
                $scope.calendarOptions.events.push({});                    
                $scope.calendarOptions.defaultDate = moment(startTime);
                $scope.calendarOptions.defaultView = agenda;
            }
        }            
    }, function err() { });

};