Question

我在angularjs中使用完整的日历插件。 https://github.com/angular-ui/ui-calendar

为完整日历的eventSource提供多个数组。

$scope.eventSources = [$scope.list1, $scope.List2, $scope.List3];

检查内部eventRender函数;知道它执行的次数超过了5K次，也影响了我的网页速度。

那么是否可以执行eventRender函数的时间不超过list1,2和3的总数？

我尝试了eventAfterRender，但它没有按预期工作。

任何帮助都将不胜感激。

已编辑： 下面是我的Angular控制器代码。我将事件数组更改为局部变量，而不是分别给出3个列表，我将项目推送到单个数组并将其分配给eventSources。

列表中的总记录数= 90

(function () {

'use strict';

//Define controller signature
angular.module("ERPApp.Controllers")
    .controller("DashboardCtrl", [
        "$scope", "$rootScope", "$timeout", "DashboardService", "$http", "$filter", "$compile","$q",
        dashboardCtrl
    ]);


//Main controller function
function dashboardCtrl($scope, $rootScope, $timeout, DashboardService, $http, $filter, $compile, $q) {
    var events = [];
    $scope.leaves = [];

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $scope.FixedColorList = [{ text: 'Half Day', colorCode: '#F6BB43' }, { text: 'Full Day', colorCode: '#4B89DC' },
                             { text: 'Approved', colorCode: '#8DC153' }, { text: 'DisApproved', colorCode: '#E9573E' }];

    $scope.changeTo = 'Hungarian';


    /* Change View */
    $scope.changeView = function (view, calendar) {
        calendar.fullCalendar('changeView', view);
    };
    /* Change View */
    $scope.renderCalender = function (calendar) {
        calendar.fullCalendar('render');
    };

    /* event source that contains custom events on the scope */
    $scope.LoadEvents = function () {
        $rootScope.IsAjaxLoading = true;
        DashboardService.GetCalendarLeaveList().then(function (result) {
            if (result.data.IsValidUser) {
                if (result.data.MessageType == 1) {

                    events.length = 0; //empty event array
                    ProcessLeave(result.data.DataList, function () {
                        $scope.LoadFestivalList().then(function (result) {
                            ProcessFestival(result, function () {


                            });
                        });
                    });
                } else {
                    toastr.error(result.data.Message, 'Opps, Something went wrong');
                }
            } else {
                $rootScope.redirectToLogin();
            }
            $rootScope.IsAjaxLoading = false;
        });
    };
    $scope.LoadEvents();

    /*load festival list*/
    $scope.LoadFestivalList = function () {
        return DashboardService.GetFestivalList();
    };

    function ProcessLeave(arrayList, callback) {
        var prom = [];
        angular.forEach(arrayList, function (value, key) {
            var colorCode = value.Status == "Approved" ? $scope.FixedColorList[2].colorCode
                     : value.Status == "DisApproved" ? $scope.FixedColorList[3].colorCode
                     : value.PartFullTime == "F" ? $scope.FixedColorList[1].colorCode
                     : value.PartFullTime == "P" ? $scope.FixedColorList[0].colorCode
                     : "#000"; // default value

            prom.push(events.push({
                start: value.StartDate,
                color: colorCode,
                leave: true
            }));

            $scope.leaves.push($filter('date')(value.StartDate, 'dd-MM-yyyy'));
        });

        $q.all(prom).then(function () {
            callback();
        });
    }

    function ProcessFestival(result, callback) {
        var prom = [];
        if (result.data.IsValidUser) {
            angular.forEach(result.data.DataList, function (value, key) {  

                if ($scope.leaves.indexOf($filter('date')(value.FestivalDate, 'dd-MM-yyyy')) < 0) {
                    prom.push(events.push({
                        start: value.FestivalDate,
                        color: value.DisplayColorCode,
                        holiday: value.IsWorkingDay == 0 ? true : false
                    }));
                }
            });

            $q.all(prom).then(function () {
                callback();
            });
        } else {
            $rootScope.redirectToLogin();
        }
    }

    /* config object */
    $scope.test = 0;
    $scope.uiConfig = {
        calendar: {
            editable: false,
            header: {
                left: 'title',
                right: 'prev,next'
            },
            timeFormat: {
                '': ''
            },
            eventRender: function (event, eventElement, monthView) {
                $scope.test++;
                if (event.holiday) {
                    $("td[data-date='" + $filter('date')(event.start, "yyyy-MM-dd") + "']").css({ "background-color": event.color, "border": "1px solid #FFFFFF" });
                } else if (!event.holiday) {
                    $("td[data-date='" + $filter('date')(event.start, "yyyy-MM-dd") + "']").css({ "background-color": event.color, "border": "1px solid #FFFFFF" });
                } else if (event.leave) {
                    $("td[data-date='" + $filter('date')(event.start, "yyyy-MM-dd") + "']").css({ "background-color": event.color, "border": "1px solid #FFFFFF" });
                }
            }
        }
    };


    /* event sources array*/
    $scope.eventSources = [events];
};

}）（）;

Answer 1

我也正在使用fullcandar并且它按预期工作：在日历被渲染时，每个事件都被推入eventSources触发器eventRender。

你确定你的日历只被呈现一次吗？

列表中有多少项？

希望这有点帮助，也许您可以发布代码示例/ plunkr？

问候

Answer 2

我认为它与此处提到的问题有关：https://code.google.com/p/fullcalendar/issues/detail?id=787

每次渲染新事件时，所有其他事件也会重新渲染。

AngularJS：eventRender函数在完整日历中执行了很多次

2 个答案: