Claender Directive

This is just a directive for the horizontal calender

by shivkumarganesh

HTML

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<div ng-app="cal">
     <h3> As element</h3>

    <ng-cal></ng-cal>
</div>

CSS

ng-cal li {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}
.hidden {
    height:0px;
    width:auto;
    display:none;
    float:right;
    margin-left:3px;
}
.years {
    width:auto;
    height:10px;
    float:left;
    color:white;
    padding:10px;
    background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%);
    z-index:-100;
}
.months {
    font-family: Helvetica;
    font-size: 12px;
    padding-left: 4px;
    width: auto;
    cursor:pointer;
    width:10px;
    height:10px;
    color:#D8D8D8;
}
.month-clicked {
    font-weight:bold;
    color:#F6F6F6;
}

JavaScript

var app = angular.module('cal', []);
app.directive('ngCal', function ($timeout) {
    return {
        restrict: 'EA',
        scope: {
            ngModel: '@'
        },
        template:
            '<div class="navlist" style="float:left;width:auto;margin:3px">' +
            '<div id="cal{{$index}}" ng-repeat="year in years" class="years" ng-click=openCal($index)>{{year.value}}' +
            '<div id="calDiv{{$index}}" ng-hide="checked" class="hidden calDiv">' +
            '<span id="month{{$index}}"ng-repeat="month in months" ng-click=val($index) class="months">{{month}}</span>' +
            '</div>' +
            '</div>' +
            '</div>',
        controller: ['$scope', function ($scope) {
            //Ping the Http Server for these values
            $scope.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            $scope.years = [{
                value: 2001
            }, {
                value: 2002
            }, {
                value: 2003
            }, {
                value: 2004
            }, {
                value: 2005
            }];
        }],
        link: function (scope, iElement, iAttr) {
            var flag = 0;
            var year = 0;
            var divid;
            $timeout(function () {
                //This function would help us to highlight the data which is being clicked
                scope.val = function (monthIndex) {
                    //Remove the style of the unselected to normal
                    $('.months').each(function (index) {
                        $(this).css({
                            'font-weight': 'normal',
                                'color': '#D8D8D8'
                        });
                    });
                    //Change the font and color of the selected content
                    $('#cal' + divid + ' ' + '#month' + monthIndex).css({
                        'font-weight': 'bold',
                            'color':...