单击下一个和上一个按钮 FullCalendar 进入议程视图

Question

我正在尝试在 angular 1 中使用完整日历，我已完成显示事件，

当我尝试在下一个和上一个按钮点击时添加事件时，我也得到了服务器的响应，但是当事件被分配给 FullCalendar 事件时，它会返回到默认视图或任何议程，例如，如果视图是天视图，当我单击上一个按钮时，它会转到前一天，当事件来自服务器时，它会返回到今天的视图。以下代码可能会让您清楚地了解我在做什么。

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

FullCalendar 选项。事件默认为空，当服务器响应来自我下面函数的服务器方法调用时，事件显示在日历中

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

};

然后单击周、月和日等议程按钮，我在上面调用相同的方法，当我对下一个和上一个按钮单击执行相同操作时，它会出现今天的视图。如果议程是天，或者议程视图是周，那么它会在本周发生，而一个月也会发生同样的情况。

下面是点击下一个和上一个按钮的代码。

这里的 $scope.tempViewAgenda 是我在日、周或月议程按钮点击时设置的临时变量值。

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

这里有没有人弄明白？

Answer 1

我得到了这个问题的答案，每当我要分配事件时，它都会重新初始化，所以我需要设置默认日期和议程视图以显示获取的事件，如

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

};

单击下一个和上一个按钮 FullCalendar 进入议程视图

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

javascript

fullcalendar

angularjs

fullcalendar-3