Calendar using Date

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<p>Calendar using pure JS Date objects</p>
<p>Works fine, <a href="http://jsfiddle.net/rlivsey/aKHhr/">version using Ember.DateTime</a> breaks.</p>

<script type="text/x-handlebars">
    <div class="calendar">
    {{#each App.calendar.daysInCalendarGroupedByWeeks}}
        <div class="calendar-week">
        {{#each this}}
            {{#view App.Views.CalendarDay dateBinding="this" monthBinding="App.calendar.date"}}
                <span class="calendar-day-number">{{dayNum}}</span>
            {{/view}}
        {{/each}}
        </div>
    {{/each}}
    </div>
</script>

CSS

.calendar {
  width: 100%;
  height: 300px;
  display: table;
}

.calendar-week {
  display: table-row;
}

.calendar-day {
  padding: 5px;
  width: 14.2%;
  display: table-cell;
  border: 1px solid #F0F0F0;
}

.is-weekend {
  background-color: #F6F6F6;   
}

.calendar-day-number {
  color: #666;
}

.is-other-month .calendar-day-number{
  color: #CCC;
}

JavaScript

App = Ember.Application.create({});
App.Views = Ember.Namespace.create({});
App.Controllers = Ember.Namespace.create({});

App.Controllers.Calendar = Ember.Object.extend({
    date: new Date(2012, 2), // March
    
    // faked so it's smaller / clearer
    daysInCalendar: function() {
        // starts on 26th Feb to cover the whole calendar
        var startYear  = 2012;
        var startMonth = 1; 
        var startDay   = 26; 
        
        var days = [];
        
        // we know there are 35 days in this calendar
        for (var i=0; i<35; i++) {
            days.push(new Date(startYear, startMonth, startDay + i));
        }
        return days;
    }.property().cacheable(),
    
    // splits the days up into groups of 7, one for each week
    daysInCalendarGroupedByWeeks: function() {
        var days = this.get("daysInCalendar");

        var index = -7;
        var weeks = [];

        while ((index += 7) < days.length) {
            weeks.push(days.slice(index, index+7));
        }
        return weeks;
    }.property().cacheable()
   
});

App.Views.CalendarDay = Ember.View.extend({
    classNames: ["calendar-day"],
    classNameBindings: ["isWeekend", "isOtherMonth"],
    
    dayNum: function() {
        return this.get("date").getDate();
    }.property("date").cacheable(),
    
    isWeekend: function() {
      var day = this.get("date").getDay();
      return day == 0 || day == 6;
    }.property("date").cacheable(),
                                          
    isOtherMonth: function() {
      var calendarMonth = this.get("month").getMonth();
      var dayMonth = this.get("date").getMonth();
      return calendarMonth != dayMonth;
    }.property("date").cacheable()
})
    
App.calendar = App.Controllers.Calendar.create({});