Calender Directive Perfect

This calender Directive is a perfect directive for adding and integrating things.

by shivkumarganesh

HTML

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<div ng-app="cal">
    <div ng-controller="ctrl">
        <ng-cal appyears="years" appmonths="months"></ng-cal>
    </div>
</div>

CSS

.hCal {
    float: left;
    font-family: tahoma;
    height: auto;
    margin-left: 5px;
    width: auto;
}
.monthCell {
    color: #D4D6D6;
    font-family: Tahoma;
    font-size: 12px;
    font-weight: bold;
    margin-left: 4px;
    cursor:pointer;
}
.mSelected {
    font-weight:bold;
    color:#4E5C72;
    font-family: Tahoma;
    font-size: 12px;
    margin-left: 4px;
    cursor:pointer;
}

JavaScript

var app = angular.module('cal', []);
app.controller('ctrl', ['$scope', function ($scope) {
    //This is the place where the entire scope would be built up by any method.    
    $scope.years = [{
        value: 2001
    }, {
        value: 2002
    }, {
        value: 2003
    }, {
        value: 2004
    }, {
        value: 2005
    }];
    $scope.months = [{
        value: 'Jan'
    }, {
        value: 'Feb'
    }, {
        value: 'Mar'
    }, {
        value: 'Apr'
    }, {
        value: 'May'
    }, {
        value: 'Jun'
    }, {
        value: 'Jul'
    }, {
        value: 'Aug'
    }, {
        value: 'Sep'
    }, {
        value: 'Oct'
    }, {
        value: 'Nov'
    }, {
        value: 'Dec'
    }];
}]);

app.directive('ngCal', function ($timeout, $compile) {
    return {
        restrict: 'E',
        scope: {
            appyears: '=',
            appmonths: '='
        },
        template: '<div id="year-{{$index}}" class="hCal" ng-repeat="year in appyears" ng-click=append($index)>{{year.value}}</div>',
        link: function (scope, iElement, iAttr) {
            $timeout(function () {
                var monthElement ='<span ng-repeat="month in appmonths" id="monthDiv{{$index}}" class="monthCell monthTag" ng-click="monthClick($index, $event)">{{month.value}}</span>';

            scope.append = function (index) {
                    //Remove preexisting month Tag
                $('.monthTag').each(function(){
                    $(this).remove();
                });
                    //Getting Id of the clicked Tag
                    var yearId = "year-" + index;
                    //Populating the div with months
                    $('#' + yearId).append($compile(monthElement)(scope));

                };
            scope.monthClick = function (index, event) {
                    event.stopPropagation();
                    $('.mSelected').removeClass("mSelected").addClass("monthCell");
                    var monthDiv = "monthDiv" +...