Calendar

by rlivsey

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.5.js"></script>
<script type="text/x-handlebars">
    <h1>Calendar for {{App.calendar.formattedDate}}</h1>
    
    <ul id="calendar">
    {{#each App.calendar.daysInMonth}}
        {{#view App.CalendarDayView dateBinding="this"}}
            <h2>{{dayNum}}</h2>
            <ul class="events">
                {{#each events}}
                    {{#view App.EventView contentBinding="this"}}
                        {{content.name}}
                    {{/view}}
                {{/each}}
            </ul>
        {{/view}}
    {{/each}}
    </ul>
</script>

CSS

#calendar li {
    border-bottom: 1px solid #CCC;   
}

#calendar li li {
    list-style-type: disc;
    margin-left: 20px;
    border: none;
}

JavaScript

App = Ember.Application.create({});

App.Event = Ember.Object.extend({
    formattedDate: function() {
        var date = this.get("date");
        return date.getFullYear() + "/" + (date.getMonth()+1) + "/" + date.getDate();
    }.property("date").cacheable()
});

App.calendar = Ember.ArrayController.create({
    date: new Date(2012, 2),
    
    content: [App.Event.create({ name: "An Event",      date: new Date(2012, 2, 10) }),
              App.Event.create({ name: "Another Event", date: new Date(2012, 2, 20) })],
    
    daysInMonth: function() {
        var days = [];
        var date = this.get("date");
        var year = date.getFullYear();
        var month = date.getMonth();
        
        for (var i=1; i<=30; i++) {
            days.push(new Date(year, month, i));
        }
        return days;
    }.property("date").cacheable(),
    
    formattedDate: function() {
       var date = this.get("date");
       return date.getFullYear() + "/" + (date.getMonth()+1);
    }.property("date").cacheable(),

    eventsForDate: function(date) {
        return this.filter(function(event) {
            return event.get("date").getTime() == date.getTime();
        });
    }
});


App.EventView = Ember.View.extend({
    tagName: "li"
});


App.CalendarDayView = Ember.View.extend({
    tagName: "li",
    dayNum: function() {
        return this.get("date").getDate();
    }.property("date").cacheable(),
    
    events: function() {
        return App.calendar.eventsForDate(this.get("date"));
    }.property("date", "App.calendar").cacheable()
})