AngularJS Simple Calendar Directive

directive.js

app.directive("calendar", function() {
    return {
      restrict: "E",
      templateUrl: "template.html",
      scope: {
        month: "=",
        year: "=",
      },
      link: function(scope) {
        var getCalendar = function(y, m) {
          var today = new Date(),
            month = new Date(y, m),
            weeks = new Array();
          var index = new Date(month.getTime()),
            lastDay = new Date(y, parseInt(m)+1, 0);
          index.setDate(index.getDate() - index.getDay())
          while (index.getTime() <= lastDay.getTime()) {
            var week = new Array();
            for (var i = 0; i < 7; i++) {
              var type = "day";
              if (index.getMonth() < month.getMonth()) type += " past";
              else if (index.getMonth() > month.getMonth()) type += " future";
              else if (index.getTime() < today.getTime() && today.getTime() < index.getTime() + 86400000) type += " today";
              week.push({type: type, date: new Date(index.getTime())})
              index.setDate(index.getDate() + 1);
            }
            weeks.push(week);
          }
          return {month: month, weeks: weeks}
        }
        var d = (typeof scope.month !== "undefined") ? new Date(scope.year, scope.month) : new Date();
        scope.calendar = getCalendar(d.getFullYear(), d.getMonth());
        scope.next = function () {
          d.setMonth(d.getMonth() + 1);
          scope.calendar = getCalendar(d.getFullYear(), d.getMonth());
        }
        scope.previous = function () {
          d.setMonth(d.getMonth() - 1);
          scope.calendar = getCalendar(d.getFullYear(), d.getMonth());
        }
      }
    };
  });

style.css

calendar {
  float: left;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  background: white;
  width: 100%;
  border: solid 1px #CCC;
  margin-bottom: 10px;
}
calendar > div.header {
  float: left;
  width: 100%;
  background: #444d58 ;
  height: 50px;
  color: white;
}
calendar > div.header > * {
  height: 50px;
  line-height: 50px !important;
  display: inline-block;
  vertical-align: top;
}
calendar > div.header > i {
  float: left;
  width: 40px;
  font-size: 1.125em;
  font-weight: bold;
  position: relative;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 0 10px;
  cursor: pointer;
}
calendar > div.header > i.fa-angle-left {
  text-align: left;
}
calendar > div.header > i.fa-angle-right {
  text-align: right;
  margin-left: -40px;
}
calendar > div.header > span {
  float: left;
  width: 100%;
  font-weight: bold;
  text-transform: uppercase;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding-left: 50px;
  margin-left: -40px;
  text-align: center;
  padding-right: 40px;
  color: inherit;
}
calendar > div.week {
  float: left;
  width: 100%;
  border-top: solid 1px #CCC;
}
calendar > div.week:first-child {
  border-top: none;
}
calendar > div.week > span.day {
  float: left;
  width: 14.28571429%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  border-left: solid 1px #CCC;
  font-size: 0.75em;
  text-align: center;
  height: 40px;
  line-height: 40px !important;
  display: inline-block;
  vertical-align: middle;
  background: white;
  cursor: pointer;
  color: black;
}
calendar > div.week > span.day:first-child {
  border-left: none;
}
calendar > div.week > span.day.today {
  background: #eff3f8;
}
calendar > div.week > span.day.past {
  color: #C0C0C0;
}
calendar > div.week > span.day.future {
  color: #C0C0C0;
}
calendar > div.week > span.day.selected {
  background: #4DB3A2;
  color: white;
}
calendar > div.week.names > span {
  color: #444d58;
  font-weight: bold;
}

template.html

<div class="header">
    <i class="fa fa-angle-left" ng-click="previous()"></i>
    <span>{{calendar.month | date: "MMMM, yyyy"}}</span>
    <i class="fa fa-angle-right" ng-click="next()"></i>
</div>
<div class="week names">
    <span class="day">Sun</span>
    <span class="day">Mon</span>
    <span class="day">Tue</span>
    <span class="day">Wed</span>
    <span class="day">Thu</span>
    <span class="day">Fri</span>
    <span class="day">Sat</span>
</div>
<div class="week" ng-repeat="week in calendar.weeks">
    <span class="{{day.type}}" ng-repeat="day in week" >{{day.date | date: "d"}}</span>
</div>