More Calendar!

NzbDrone.Backbone/Calendar/CalendarCollectionTemplate.html

@@ -1 +1,3 @@
-<div id="calendar"></div>
+<div id="calendar">
+</div>
+<div id="fakeContainer"></div>

NzbDrone.Backbone/Calendar/CalendarCollectionView.js

@@ -3,33 +3,34 @@
 define(['app', 'Calendar/CalendarItemView'], function (app) {
     NzbDrone.Calendar.CalendarCollectionView = Backbone.Marionette.CompositeView.extend({
         itemView: NzbDrone.Calendar.CalendarItemView,
+        itemViewContainer: '#fakeContainer',
         template: 'Calendar/CalendarCollectionTemplate',
-        itemViewContainer: 'table',
 
         ui: {
             calendar: '#calendar'
         },
 
-        initialize: function () {
-            this.collection = new NzbDrone.Calendar.CalendarCollection();
-            this.collection.fetch();
-            this.collection.bind('reset', this.addAll);
+        initialize: function (context, collection) {
+            this.collection = collection;
         },
-        render: function() {
-            this.ui.calendar.fullCalendar({
+        onRender: function() {
+            $(this.ui.calendar).fullCalendar({
                 header: {
                     left: 'prev,next today',
                     center: 'title',
-                    right: 'month,basicWeek,basicDay',
+                    right: 'month,basicWeek',
                     ignoreTimezone: false
                 },
-                selectable: true,
-                selectHelper: true,
-                editable: true
+                buttonText: {
+                    prev: '<i class="icon-arrow-left"></i>',
+                    next: '<i class="icon-arrow-right"></i>'
+                }
             });
+
+            $(this.ui.calendar).fullCalendar('addEventSource', this.collection.toJSON());
     	},
         addAll: function(){
-            this.el.fullCalendar('addEventSource', this.collection.toJSON());
+            $(this.ui.calendar).fullCalendar('addEventSource', this.collection.toJSON());
         }
     });
 });

NzbDrone.Backbone/Calendar/CalendarModel.js

@@ -1,7 +1,12 @@
 define(['app'], function (app) {
     NzbDrone.Calendar.CalendarModel = Backbone.Model.extend({
         mutators: {
-
+            title: function () {
+                return this.get('seriesTitle') + ' - ' + this.get('seasonNumber') + 'x' + this.get('episodeNumber').pad(2);
+            },
+            allDay: function(){
+                return false;
+            }
         },
         defaults: {
             status: 0

NzbDrone.Backbone/Controller.js

@@ -21,7 +21,9 @@
         
         calendar: function (action, query) {
             this.setTitle('Calendar');
-            NzbDrone.mainRegion.show(new NzbDrone.Calendar.CalendarCollectionView(this, action, query));
+            var calendarCollection = new NzbDrone.Calendar.CalendarCollection();
+            calendarCollection.fetch();
+            NzbDrone.mainRegion.show(new NzbDrone.Calendar.CalendarCollectionView(this, calendarCollection, action, query));
         },
 
         notFound: function () {

NzbDrone.Backbone/Index.html

@@ -51,7 +51,6 @@
                         <li><a href="settings"><i class="icon-cogs"></i><br>Settings</a></li>
                         <li><a href="system" class="active"><i class="icon-plane"></i><br>System</a></li>
                         <li><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=KRTE52U3XJDSQ" target="_blank"><i class="icon-star"></i><br>Donate</a></li>
-                        
                     </ul>
                 </div>
             </div>
@@ -93,6 +92,7 @@
 <script src="/static/JsLibraries/jquery.tablesorter.js"></script>
 <script src="/static/JsLibraries/jquery.tablesorter.bootstrap.js"></script>
 <script src="/static/JsLibraries/sugar.js"></script>
+<script src="/static/JsLibraries/fullcalendar.js"></script>
 
 <script src="/static/Mixins/backbone.marionette.templates.js"></script>
 <script src="/static/Mixins/backbone.ajax.js"></script>

NzbDrone.Backbone/JsLibraries/fullcalendar.js

@@ -253,6 +253,7 @@ function Calendar(element, options, eventSources) {
 	
 	
 	function initialRender() {
+        element.html('');
 		tm = options.theme ? 'ui' : 'fc';
 		element.addClass('fc');
 		if (options.isRTL) {