Angularjs - html table with months and weeks

Viewed 26

I want somthing like this, a table with months and weeks number: enter image description here

I made this JS Ffiddle: https://jsfiddle.net/2fxq4pc9/

function TodoCtrl($scope) {
       
        $scope.filter = {
            "year": ''+new Date().getFullYear()
        };
        
        $scope.months = [
            {"name": "Jan","number": 1, "totalWeeks": null, "weeks": null},
            {"name": "Feb","number": 2, "totalWeeks": null, "weeks": null},
            {"name": "Mar","number": 3, "totalWeeks": null, "weeks": null},
            {"name": "Apr","number": 4, "totalWeeks": null, "weeks": null},
            {"name": "May","number": 5, "totalWeeks": null, "weeks": null},
            {"name": "Jun","number": 6, "totalWeeks": null, "weeks": null},
            {"name": "Jul","number": 7, "totalWeeks": null, "weeks": null},
            {"name": "Aug","number": 8, "totalWeeks": null, "weeks": null},
            {"name": "Sep","number": 9, "totalWeeks": null, "weeks": null},
            {"name": "Oct","number": 10, "totalWeeks": null, "weeks": null},
            {"name": "Nov","number": 11, "totalWeeks": null, "weeks": null},
            {"name": "Dec","number": 12, "totalWeeks": null, "weeks": null}
        ];
               
        $scope.getTotalWeekOfAMonth = function(year, month) {
            var firstOfMonth = new Date(year, month - 1, 1);
            var day = firstOfMonth.getDay() || 6;
            day = day === 1 ? 0 : day;
            if (day) { day-- }
            var diff = 7 - day;
            var lastOfMonth = new Date(year, month, 0);
            var lastDate = lastOfMonth.getDate();
            if (lastOfMonth.getDay() === 1) {
              diff--;
            }
            var result = Math.ceil((lastDate - diff) / 7);
            return result + 1;
        }      
        
        
        $scope.createWeeksNumberList = function() {
            $scope.months.forEach(function(element) {
                var weekTotals = $scope.getTotalWeekOfAMonth($scope.filter.year, element.number);
                var obj = [];
                for (let week = 1; week <= weekTotals; week++) {
                    obj.push({"weekNumber": week, "flag": null });
                }
                element.weeks = obj;
                element.totalWeeks = weekTotals;
            });
        }          
        
   

        $scope.createWeeksNumberList();
    }

Is there a way to improve it and to show numbers of weeks consecutive? 1 to 52 (splitted by months). The current one seems a bit slow and ugly (I'm concerned about the javascript code and not the css style).

Thanks.

0 Answers
Related