acha-framework/src/frontend/core/scripts/directives/calendar/template.html

is a modular framework on both client (angular.js) and server (node.js) side, it provides security, orm, ioc, obfuscation and ...

<div ng-show="visible" class="af-calendar af-component {{::cssClass}}
    datepicker datepicker-orient-left datepicker-orient-top">
    <div ng-if="mode ==='days'" class="datepicker-days">
        <table>
            <thead>
            <tr>
                <th class="{{::vm.cultureService.rtl ? 'next' : 'prev'}}"
                    ng-click="vm.forwardMonth()">«
                </th>
                <th colspan="5" class="datepicker-switch"
                    ng-click="vm.switch('months')">
                    {{vm.getMonthName()}}&nbsp;{{vm.tempYear}}
                </th>
                <th class="{{::vm.cultureService.rtl ? 'prev' : 'next'}}"
                    ng-click="vm.backwardMonth()">»
                </th>
            </tr>
            <tr>
                <th ng-repeat="title in ::vm.calendar.dayNamesShort" class="dow">
                    {{::title}}
                </th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="week in vm.days">
                <td ng-repeat="day in ::week"
                    ng-click="vm.update(day.year, day.month, day.number)"
                    class="{{::day.old?'old':''}} day {{!day.old &&day.number === vm.current.day?'active':''}}">
                    {{day.number}}
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <th colspan="7" ng-click="vm.setToday()" class="today">
                    {{::'general.today'|translate}}
                </th>
            </tr>
            </tfoot>
        </table>
    </div>
    <div ng-if="mode ==='months'" class="datepicker-months">
        <table class="table-condensed">
            <thead>
            <tr>
                <th class="{{::vm.cultureService.rtl ? 'next' : 'prev'}}"
                    ng-click="vm.forwardYears(1)">«
                </th>
                <th colspan="5" class="datepicker-switch"
                    ng-click="vm.switch('years')">{{vm.tempYear}}</th>
                <th class="{{::vm.cultureService.rtl ? 'prev' : 'next'}}"
                    ng-click="vm.backwardYears(1)">»
                </th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td colspan="7">
                    <span ng-repeat="name in vm.calendar.monthNames"
                          ng-click="vm.updateMonth($index+1)"
                          class="month {{$index+1 === vm.current.month?'active':''}}">
                        {{::name}}
                    </span>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <th colspan="7" ng-click="vm.setToday()" class="today">
                    {{::'general.today'|translate}}
                </th>
            </tr>
            </tfoot>
        </table>
    </div>
    <div ng-if="mode ==='years'" class="datepicker-years">
        <table class="table-condensed">
            <thead>
            <tr>
                <th class="{{::vm.cultureService.rtl ? 'next' : 'prev'}}"
                    ng-click="vm.forwardYears(12)">«
                </th>
                <th colspan="5" class="datepicker-switch"
                    ng-click="vm.switch('days')">
                    {{vm.tempYears[0]}}-{{vm.tempYears[vm.tempYears.length-1]}}
                </th>
                <th class="{{::vm.cultureService.rtl ? 'prev' : 'next'}}"
                    ng-click="vm.backwardYears(12)">»
                </th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td colspan="7">
                    <span ng-click="vm.updateYear(year)"
                          ng-repeat="year in vm.tempYears"
                          class="year {{year === vm.current.year?'active':''}} {{::$first?'old':''}} {{::$last?'new':''}}">
                        {{::year}}
                    </span>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <th colspan="7" ng-click="vm.setToday()" class="today">
                    {{::'general.today'|translate}}
                </th>
            </tr>
            </tfoot>
        </table>
    </div>
</div>