Angular Scheduler

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
<script type="text/ng-template" id="template/scheduler/scheduler.html">
    <table>
        <thead>
            <tr class="text-center">
                <th colspan="{{rows[0].length}}">
                    <button class="btn pull-left" ng-click="move(-1)"><i class="icon-chevron-left"></i></button>
                    <button class="btn" ng-click="toggleMode()"><strong>{{title}}</strong></button>
                    <button class="btn pull-right" ng-click="move(1)"><i class="icon-chevron-right"></i></button>
                </th>
            </tr>
        </thead>
        <tbody><tr><td colspan="{{rows[0].length}}" style="position: relative;">
            <table class="table table-bordered">
                <thead>
                    <tr ng-show="labels.length > 0">
                        <th ng-repeat="label in labels">
                            <div class="span2 text-center" style="margin: 0;">{{label}}</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="row in rows">
                        <td ng-repeat="dt in row">
                            <div ng-class="{muted: ! dt.isCurrent}">
                                <div class="text-right">{{dt.label}}</div>
                                <div class="alert" style="background-color: transparent; border-color: transparent; padding: 1px 4px;">&nbsp;</div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <table class="table table-bordered" style="position: absolute; top: 1px; left: 1px; border-color: transparent;">
                <thead>
                    <tr ng-show="labels.length > 0">
                       ...

JavaScript

angular.module('ui.bootstrap.scheduler', [])

.constant('schedulerConfig', {
  dayFormat: 'dd',
  monthFormat: 'MMMM',
  yearFormat: 'yyyy',
  dayHeaderFormat: 'EEE',
  dayTitleFormat: 'MMMM yyyy',
  monthTitleFormat: 'yyyy',
  showWeeks: true,
  startingDay: 2,
  yearRange: 10
})

.directive( 'scheduler', ['$filter', '$parse', 'schedulerConfig', function ($filter, $parse, schedulerConfig) {
  return {
    restrict: 'EA',
    replace: true,
    scope: {
      model: '=ngModel',
      dateDisabled: '&'
    },
      
      
    templateUrl: 'template/scheduler/scheduler.html',
      
      
      
    link: function(scope, element, attrs) {
      scope.mode = 'month'; // Initial mode

      // Configuration parameters
      var selected = new Date(), showWeeks, minDate, maxDate, format = {};
      format.day   = angular.isDefined(attrs.dayFormat) ? scope.$eval(attrs.dayFormat) : schedulerConfig.dayFormat;
      format.month = angular.isDefined(attrs.monthFormat) ? scope.$eval(attrs.monthFormat) : schedulerConfig.monthFormat;
      format.year  = angular.isDefined(attrs.yearFormat) ? scope.$eval(attrs.yearFormat) : schedulerConfig.yearFormat;
      format.dayHeader  = angular.isDefined(attrs.dayHeaderFormat) ? scope.$eval(attrs.dayHeaderFormat) : schedulerConfig.dayHeaderFormat;
      format.dayTitle   = angular.isDefined(attrs.dayTitleFormat) ? scope.$eval(attrs.dayTitleFormat) : schedulerConfig.dayTitleFormat;
      format.monthTitle = angular.isDefined(attrs.monthTitleFormat) ? scope.$eval(attrs.monthTitleFormat) : schedulerConfig.monthTitleFormat;
      var startingDay   = angular.isDefined(attrs.startingDay) ? scope.$eval(attrs.startingDay) : schedulerConfig.startingDay;
      var yearRange = angular.isDefined(attrs.yearRange) ? scope.$eval(attrs.yearRange) : schedulerConfig.yearRange;

      if (attrs.min) {
        scope.$parent.$watch($parse(attrs.min), function(value) {
          minDate = new Date(value);
          refill();
        });
      }
      if...