Calendar/Upcoming use episode details.

UI/Calendar/CalendarView.js

@@ -2,10 +2,12 @@
 
 define(
     [
+        'app',
         'marionette',
         'Calendar/Collection',
+        'Episode/Layout',
         'fullcalendar'
-    ], function (Marionette, CalendarCollection) {
+    ], function (App, Marionette, CalendarCollection, EpisodeLayout) {
 
         var _instance;
 
@@ -33,24 +35,10 @@ define(
                     eventRender   : function (event, element) {
                         $(element).addClass(event.statusLevel);
                         $(element).children('.fc-event-inner').addClass(event.statusLevel);
-
-                        element.popover({
-                            title    : '{seriesTitle} - {season}x{episode} - {episodeTitle}'.assign({
-                                seriesTitle : event.title,
-                                season      : event.seasonNumber,
-                                episode     : event.episodeNumber.pad(2),
-                                episodeTitle: event.episodeTitle
-                            }),
-                            content  : event.overview,
-                            placement: 'bottom',
-                            trigger  : 'manual'
-                        });
                     },
-                    eventMouseover: function () {
+                    eventClick : function (event) {
-                        $(this).popover('show');
+                        var view = new EpisodeLayout({ model: event.model });
-                    },
+                        App.modalRegion.show(view);
-                    eventMouseout : function () {
-                        $(this).popover('hide');
                     }
                 });
 
@@ -73,10 +61,14 @@ define(
                             var seriesTitle = element.get('series').get('title');
                             var start = element.get('airDate');
 
-                            element.set('title', seriesTitle);
+                            element.set({
-                            element.set('episodeTitle', episodeTitle);
+                                'title': seriesTitle,
-                            element.set('start', start);
+                                episodeTitle: episodeTitle,
-                            element.set('allDay', false);
+                                start: start,
+                                allDay: false
+                            });
+
+                            element.set('model', element);
                         });
 
                         callback(calendarCollection.toJSON());

UI/Calendar/UpcomingItemTemplate.html

@@ -7,4 +7,5 @@
         <h4>{{series.title}}</h4>
     </a>
     <p>{{startTime}} {{ShortDate airDate}}<span class="pull-right">{{seasonNumber}}x{{paddedEpisodeNumber}}</span><br>{{episodeTitle}}</p>
+    <p class="episode-title x-episode-title">{{title}}</p>
 </div>

UI/Calendar/UpcomingItemView.js

@@ -2,10 +2,21 @@
 
 define(
     [
-        'marionette'
+        'app',
-    ], function (Marionette) {
+        'marionette',
+        'Episode/Layout'
+    ], function (App, Marionette, EpisodeLayout) {
         return Marionette.ItemView.extend({
             template: 'Calendar/UpcomingItemTemplate',
-            tagName : 'div'
+            tagName : 'div',
+
+            events  : {
+                'click .x-episode-title' : '_showEpisodeDetails'
+            },
+
+            _showEpisodeDetails : function() {
+                var view = new EpisodeLayout({ model: this.model });
+                App.modalRegion.show(view);
+            }
         });
     });

UI/Calendar/calendar.less

@@ -1,3 +1,8 @@
+@import "../content/Bootstrap/mixins";
+@import "../content/Bootstrap/variables";
+@import "../content/Bootstrap/buttons";
+@import "../Shared/Styles/clickable";
+
 .calendar {
   th, td {
     border-color : #eeeeee;
@@ -15,6 +20,10 @@
     text-align       : center;
   }
 
+  .fc-event {
+    .clickable;
+  }
+
   .info {
     border-color     : #14b8d4;
     background-color : #14b8d4;
@@ -85,6 +94,7 @@
 
   p {
     color : #999999;
+    margin: 0px;
   }
 
   .danger {
@@ -118,4 +128,10 @@
   .success {
     border-color : #4cb158;
   }
+
+  .episode-title {
+    .btn-link;
+    color: @linkColor;
+    margin-top: 1px;
+  }
 }