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

时间:2018-07-30 13:08:57

标签: javascript angularjs fullcalendar fullcalendar-3

我正在尝试使用角度1的完整日历,并且已经完成了显示事件的工作,

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

HTML

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

角度

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

这里有人可以弄清楚吗?

1 个答案:

答案 0 :(得分:1)

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

void YourParentWidget::enterEvent(QEvent * event)
{
    int x = 100;
    int y = 100;

    QPoint pos = mapToGlobal(QPoint(x, y));
    mYourPopUpWidget.move(pos);
    mYourPopUpWidget.show();
}

void YourParentWidget::leaveEvent(QEvent * event)
{
    mYourPopUpWidget.hide();
}