Display popover when hovering over an event

admin/calendar.php

@@ -304,10 +304,18 @@ require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
     </div>
 </div>
 <div class="popover-template" style="display: none">
-    <div class="row">
+    <div>
-        <div class="col-md-6">
+        <div class="popover-location">
-            <i class="fa fa-clock"></i>
+            <strong>Location</strong>
-            <p>00:00 - 00:00</p>
+            <span></span>
+        </div>
+        <div class="popover-from">
+            <strong>From</strong>
+            <span></span>
+        </div>
+        <div class="popover-to">
+            <strong>To</strong>
+            <span></span>
         </div>
     </div>
 </div>

js/calendar/mods-for-hesk-calendar.js

@@ -91,22 +91,50 @@ $(document).ready(function() {
                 });
             }
         },
-        eventMouseover: function(event, jsEvent, view) {
+        eventMouseover: function(event) {
-            $eventMarkup = $(this);
+            if (event.type === 'TICKET') {
+                // Don't build a popover for tickets
+                return;
+            }
+
+            var contents = $('.popover-template').html();
+            $contents = $(contents);
+
+            var format = 'dddd, MMMM Do YYYY';
+            var endDate = event.end == null ? event.start : event.end;
+
+            if (!event.allDay) {
+                format += ', HH:mm';
+            }
+
+            if (event.location === '') {
+                $contents.find('.popover-location').hide();
+            }
+
+            $contents.find('.popover-location span').text(event.location).end()
+                .find('.popover-from span').text(event.start.format(format)).end()
+                .find('.popover-to span').text(endDate.format(format));
+            var $eventMarkup = $(this);
             $eventMarkup.popover({
                 title: event.title,
                 html: true,
-                content: $('.popover-template').html(),
+                content: $contents,
                 animation: true,
                 container: 'body',
                 placement: 'auto'
             }).popover('show');
         },
-        eventMouseout: function (event, jsEvent, view) {
+        eventMouseout: function (event) {
+            if (event.type === 'TICKET') {
+                // There's no popover to destroy
+                return;
+            }
+
             $(this).popover('destroy');
         }
     });
 
+
     $('#create-form input[name="all-day"]').change(function() {
         var hideTimeFields = $(this).is(':checked');