Calendar using Ember.DateTime

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="https://raw.github.com/gist/2146078/4ff6e062106ff4992471c87ab652f9efda6ad4bf/ember-datetime.js"></script>
<p>Only difference to <a href="http://jsfiddle.net/rlivsey/tMYqZ/">previous version</a> is using Ember.DateTime instead of pure Date objects</p>
<p>Uncaught Error: assertion failed: Unable to find view at path 'App.Views.CalendarDay'</p>

<script type="text/x-handlebars">
    <div class="calendar">
    {{#each App.calendar.daysInCalendarGroupedByWeeks}}
        <div class="calendar-week">
        {{#each this}}
            <!-- 
                This dies because it can't find App.Views.CalendarDay 
                I *think* because it's not looking globally but in the context of the DateTime
                object instead?
            -->
            {{#view App.Views.CalendarDay dateBinding="this" monthBinding="App.calendar.date"}}
                <span class="calendar-day-number">{{date.day}}</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

// Patch Ember.DateTime.unknownProperty to return undefined instead of null for unknown properties
Ember.DateTime2 = Ember.DateTime.extend({
  unknownProperty: function(key) {
    var val = this._super(key);
    return val === null ? undefined : val;
  }    
});

// switch these around to get the non patched version

DateClass = Ember.DateTime2;
// DateClass = Ember.DateTime;

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

App.Controllers.Calendar = Ember.Object.extend({
    date: DateClass.create({year: 2012, month: 3}), // March
    
    // faked so it's smaller / clearer
    daysInCalendar: function() {
        // starts on 26th Feb to cover the whole calendar
        var startYear  = 2012;
        var startMonth = 2; 
        var startDay   = 26; 
        
        var days = [];
        
        // we know there are 35 days in this calendar
        for (var i=0; i<35; i++) {
            days.push(DateClass.create({year: startYear, month: startMonth, day: 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"],
    
    isWeekend: function() {
      var day = this.get("date").get("dayOfWeek");
      return day == 0 || day == 6;
    }.property("date").cacheable(),
                                          
    isOtherMonth: function() {
      var calendarMonth = this.get("month").get("month");
      var dayMonth = this.get("date").get("month");
      return...