javascript - Angular : eventRender function is executing so many times in full calendar

Question

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

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

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

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

那么是否有可能在不超过 list1、2 和 3 的总数的情况下执行 eventRender 函数？

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

如有任何帮助，我们将不胜感激。

已编辑:下面是我的 Angular Controller 代码。我将事件数组更改为局部变量，而不是单独给出 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？

问候