removed backbone from VS solution,

renamed NzbDrone.Backbone to UI

UI/Upcoming/UpcomingCollection.js

@@ -0,0 +1,6 @@
+define(['app', 'Upcoming/UpcomingModel'], function () {
+    NzbDrone.Upcoming.UpcomingCollection = Backbone.Collection.extend({
+        url: NzbDrone.Constants.ApiRoot + '/upcoming',
+        model: NzbDrone.Upcoming.UpcomingModel
+    });
+});

UI/Upcoming/UpcomingCollectionTemplate.html

@@ -0,0 +1,65 @@
+<table class="table table-striped">
+    <thead>
+        <tr>
+            <th>Series Title</th>
+            <th>Episode</th>
+            <th>Episode Title</th>
+            <th>Air Time</th>
+            <th>Status</th>
+        </tr>
+    </thead>
+
+    <tbody id="yesterday">
+        <tr>
+            <td colspan="5">Yesterday</td>
+        </tr>
+    </tbody>
+
+    <tbody id="today">
+        <tr>
+            <td colspan="5">Today</td>
+        </tr>
+    </tbody>
+
+    <tbody id="tomorrow">
+    <tr>
+        <td colspan="5">Tomorrow</td>
+    </tr>
+    </tbody>
+
+    <tbody id="two_days">
+    <tr>
+        <td colspan="5">{{two_days}}</td>
+    </tr>
+    </tbody>
+
+    <tbody id="three_days">
+    <tr>
+        <td colspan="5">{{three_days}}</td>
+    </tr>
+    </tbody>
+
+    <tbody id="four_days">
+    <tr>
+        <td colspan="5">{{four_days}}</td>
+    </tr>
+    </tbody>
+
+    <tbody id="five_days">
+    <tr>
+        <td colspan="5">{{five_days}}</td>
+    </tr>
+    </tbody>
+
+    <tbody id="six_days">
+    <tr>
+        <td colspan="5">{{six_days}}</td>
+    </tr>
+    </tbody>
+
+    <tbody id="later">
+    <tr>
+        <td colspan="5">Later</td>
+    </tr>
+    </tbody>
+</table>

UI/Upcoming/UpcomingCollectionView.js

@@ -0,0 +1,89 @@
+'use strict';
+
+define(['app', 'Upcoming/UpcomingItemView'], function (app) {
+    NzbDrone.Upcoming.UpcomingCollectionView = Backbone.Marionette.CompositeView.extend({
+        itemView: NzbDrone.Upcoming.UpcomingItemView,
+        template: 'Upcoming/UpcomingCollectionTemplate',
+        itemViewContainer: 'table',
+
+        ui: {
+            yesterday: 'tbody#yesterday',
+            today: 'tbody#today',
+            tomorrow: 'tbody#tomorrow',
+            two_days: 'tbody#two_days',
+            three_days: 'tbody#three_days',
+            four_days: 'tbody#four_days',
+            five_days: 'tbody#five_days',
+            six_days: 'tbody#six_days',
+            later: 'tbody#later'
+        },
+
+        initialize: function () {
+            this.collection = new NzbDrone.Upcoming.UpcomingCollection();
+            this.collection.fetch();
+        },
+
+        serializeData: function() {
+            var viewData = {};
+            viewData.two_days = Date.create().addDays(2).format('{Weekday}');
+            viewData.three_days = Date.create().addDays(3).format('{Weekday}');
+            viewData.four_days = Date.create().addDays(4).format('{Weekday}');
+            viewData.five_days = Date.create().addDays(5).format('{Weekday}');
+            viewData.six_days = Date.create().addDays(6).format('{Weekday}');
+            return viewData;
+        },
+
+        appendHtml: function(collectionView, itemView, index){
+            var date = Date.create(itemView.model.get('airTime'));
+
+            if (date.isYesterday()){
+                collectionView.$(this.ui.yesterday).append(itemView.el);
+                return;
+            }
+
+            if (date.isToday()){
+                collectionView.$(this.ui.today).append(itemView.el);
+                return;
+            }
+
+            if (date.isTomorrow()){
+                collectionView.$(this.ui.tomorrow).append(itemView.el);
+                return;
+            }
+
+            if (date.is(Date.create().addDays(2).short())){
+                collectionView.$(this.ui.two_days).append(itemView.el);
+                return;
+            }
+
+            if (date.is(Date.create().addDays(3).short())){
+                collectionView.$(this.ui.three_days).append(itemView.el);
+                return;
+            }
+
+            if (date.is(Date.create().addDays(4).short())){
+                collectionView.$(this.ui.four_days).append(itemView.el);
+                return;
+            }
+
+            if (date.is(Date.create().addDays(5).short())){
+                collectionView.$(this.ui.five_days).append(itemView.el);
+                return;
+            }
+
+            if (date.is(Date.create().addDays(6).short())){
+                collectionView.$(this.ui.six_days).append(itemView.el);
+                return;
+            }
+
+            collectionView.$(this.ui.later).append(itemView.el);
+
+            //if (date.isBefore(Date.create().addDays(7))) return date.format('{Weekday}');
+        },
+
+        onCompositeCollectionRendered: function()
+        {
+            //Might not need this :D
+        }
+    });
+});

UI/Upcoming/UpcomingItemTemplate.html

@@ -0,0 +1,5 @@
+<td>{{seriesTitle}}</td>
+<td>{{seasonNumber}}x{{episodeNumber}}</td>
+<td>{{episodeTitle}}</td>
+<td>{{airTime}}</td>
+<td>{{status}}</td>

UI/Upcoming/UpcomingItemView.js

@@ -0,0 +1,16 @@
+'use strict';
+
+define([
+        'app',
+        'Upcoming/UpcomingCollection'
+
+], function () {
+    NzbDrone.Upcoming.UpcomingItemView = Backbone.Marionette.ItemView.extend({
+        template: 'Upcoming/UpcomingItemTemplate',
+        tagName: 'tr',
+
+        onRender: function () {
+            NzbDrone.ModelBinder.bind(this.model, this.el);
+        }
+    })
+})

UI/Upcoming/UpcomingModel.js

@@ -0,0 +1,10 @@
+define(['app'], function (app) {
+    NzbDrone.Upcoming.UpcomingModel = Backbone.Model.extend({
+        mutators: {
+
+        },
+        defaults: {
+            status: 0
+        }
+    });
+});