Calendar is coming together!

NzbDrone.Backbone/AddSeries/addSeries.css

@@ -71,7 +71,7 @@
     font-size: 16px;
 }
 
-.existing-root-folder-view, h1 {
+.existing-root-folder-view h1 {
     padding: 10px 0 20px 0;
 }
 

NzbDrone.Backbone/Calendar/CalendarCollection.js

@@ -1,6 +1,9 @@
 define(['app', 'Calendar/CalendarModel'], function () {
     NzbDrone.Calendar.CalendarCollection = Backbone.Collection.extend({
         url: NzbDrone.Constants.ApiRoot + '/calendar',
-        model: NzbDrone.Calendar.CalendarModel
+        model: NzbDrone.Calendar.CalendarModel,
+        comparator: function(model) {
+            return model.get('start');
+        }
     });
 });

NzbDrone.Backbone/Calendar/CalendarCollectionTemplate.html

@@ -1,3 +1,6 @@
-<div id="calendar">
+<div id="events" class="span3">
+    <h4>Upcoming</h4>
 </div>
-<div id="upcomingContainer"></div>
+<div class=span9>
+    <div id="calendar"></div>
+</div>

NzbDrone.Backbone/Calendar/CalendarCollectionView.js

@@ -3,8 +3,9 @@
 define(['app', 'Calendar/CalendarItemView'], function (app) {
     NzbDrone.Calendar.CalendarCollectionView = Backbone.Marionette.CompositeView.extend({
         itemView: NzbDrone.Calendar.CalendarItemView,
-        itemViewContainer: '#upcomingContainer',
+        itemViewContainer: '#events',
         template: 'Calendar/CalendarCollectionTemplate',
+        className: 'row',
 
         ui: {
             calendar: '#calendar'
@@ -17,7 +18,7 @@ define(['app', 'Calendar/CalendarItemView'], function (app) {
         onCompositeCollectionRendered: function() {
             $(this.ui.calendar).fullCalendar({
                 allDayDefault: false,
-                //ignoreTimezone: false,
+                ignoreTimezone: false,
                 weekMode: 'variable',
                 header: {
                     left: 'prev,next today',

NzbDrone.Backbone/Calendar/CalendarItemTemplate.html

@@ -1,5 +1,6 @@
-<td>{{seriesTitle}}</td>
-<td>{{seasonNumber}}x{{episodeNumber}}</td>
-<td>{{episodeTitle}}</td>
-<td>{{airTime}}</td>
-<td>{{status}}</td>
+<div class="date {{statusLevel}}">
+    <h1>{{day}}</h1>
+    <h4>{{month}}</h4>
+</div>
+<h4>{{seriesTitle}}</h4>
+<p>{{startTime}}<span class="pull-right">{{seasonNumber}}x{{paddedEpisodeNumber}}</span><br>{{episodeTitle}}</p>

NzbDrone.Backbone/Calendar/CalendarItemView.js

@@ -7,7 +7,8 @@ define([
 ], function () {
     NzbDrone.Calendar.CalendarItemView = Backbone.Marionette.ItemView.extend({
         template: 'Calendar/CalendarItemTemplate',
-        tagName: 'tr',
+        tagName: 'div',
+        className: 'event',
 
         onRender: function () {
             NzbDrone.ModelBinder.bind(this.model, this.el);

NzbDrone.Backbone/Calendar/CalendarModel.js

@@ -2,10 +2,41 @@
     NzbDrone.Calendar.CalendarModel = Backbone.Model.extend({
         mutators: {
             title: function () {
-                return this.get('seriesTitle') + ' - ' + this.get('seasonNumber') + 'x' + this.get('episodeNumber').pad(2);
+                return this.get('seriesTitle');
             },
             allDay: function(){
                 return false;
+            },
+            day: function() {
+                return Date.create(this.get('start')).format('{dd}');
+            },
+            month: function(){
+                return Date.create(this.get('start')).format('{MON}');
+            },
+            startTime: function(){
+                var start = Date.create(this.get('start'));
+
+                if (start.format('{mm}') === '00')
+                    return start.format('{h}{tt}');
+
+                return start.format('{h}.{mm}{tt}');
+            },
+            paddedEpisodeNumber: function(){
+                return this.get('episodeNumber');
+            },
+            statusLevel: function() {
+                var status = this.get('status');
+                var currentTime = Date.create();
+                var start = Date.create(this.get('start'));
+                var end = Date.create(this.get('end'));
+
+                if (currentTime.isBetween(start, end))
+                    return 'warning';
+
+                if (status === 'Missing') return 'danger';
+                if (status === 'Ready') return 'success';
+
+                return 'info';
             }
         },
         defaults: {