Kollavarsham Calendar

Work In Progress UI for the Calendar API

by Hari Menon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-resource.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<div class="root" ng-controller="mainController">
     <h1><span class="left"> <a href="#" ng-click="previous()">&lt;</a> </span> {{calendar.year}} <span class="right"> <a href="#" ng-click="next()">&gt;</a> </span> </h1>

    <div ng-repeat="month in calendar.months">
         <h2><span>{{calendar.year}} - {{month.name}}</span><span class="malayalam-month">{{malayalamMonthNames}}</span></h2>

        <month ng-model="month"></month>
    </div>
</div>

CSS

.root > div {
    display: inline-block;
    margin: 15px;
    padding: 3px;
    border: solid 1px #ddd;
    vertical-align: top;
}
* {
    font-family:"Consolas", monospace;
    font-family:'Roboto', sans-serif;
}
.left {
    float: left;
}
.right {
    float: right;
}
.day {
    margin: 5px;
    min-width: 40px;
}
.sunday {
    color: #f00;
}
.head {
    text-align: left;
}
h1, .day > .gregorian, .head {
    font-size: 3em;
    text-align: center;
}
.malayalam-month {
    float: right;
}
.malayalam-row {
    color: #000;
    white-space:nowrap;
}
.malayalam-day {
    font-size: 1.2em;
}
.naksatra {
    font-size: 0.9em;
}

JavaScript

var app = angular.module('myApp', ['ngResource']);

var baseUrl = 'http://kollavarsham-calendar.herokuapp.com/api/';

app.factory('Year', ['$resource', function ($resource) {
    return $resource(baseUrl + 'years/:year?lang=ml', {}, {
        query: {
            headers: {
                'Accept': 'application/json'
            }
        }
    });
}]);

app.directive('month', function () {
    // Requires that scope contains a 'monthDays' array.
    // Adds 'weeks' to scope.
    return {
        restrict: 'E',
        replace: true,
        template: '<table>' + '<colgroup span="7"></colgroup>' + '<tbody>' + '<tr class="head">' + '<th scope="col" title="Sunday" class="sunday">S</th>' + '<th scope="col" title="Monday">M</th>' + '<th scope="col" title="Tuesday">T</th>' + '<th scope="col" title="Wednesday">W</th>' + '<th scope="col" title="Thursday">T</th>' + '<th scope="col" title="Friday">F</th>' + '<th scope="col" title="Saturday">S</th>' + '</tr>' + '<tr ng-repeat="week in weeks">' + '<td ng-repeat="day in week"><div class="day" ng-class="$first ? \'sunday\' : \'\'"><div class="gregorian">{{day.date}}</div><div class="malayalam-row"><span class="malayalam-day">{{day.malayalamDay}} </span><span class="naksatra">{{day.naksatra}}</span></div></div></td>' + '</tr></tbody></table>',
        link: function (scope) {
            var weekdaysLookup = {
                0: 'ഞായർ     ',
                1: 'തിങ്കൾ   ',
                2: 'ചൊവ്വ    ',
                3: 'ബുധൻ     ',
                4: 'വ്യാഴം   ',
                5: 'വെള്ളി   ',
                6: 'ശനി      '
            };

            var unique = function (xs) {
                return xs.filter(function (x, i) {
                    return xs.indexOf(x) === i
                })
            };
            var malayalamMonthNames = scope.month.days.map(function (day) {
                return day.malayalamMonth;
            });
            var uniqueMonths = unique(malayalamMonthNames);
           ...