always keep the selected element in the dom

source/Ox.UI/js/Calendar/Ox.Calendar.js

@@ -540,6 +540,34 @@ Ox.Calendar = function(options, self) {
         renderCalendar();
     }
 
+    function getBackgroundElements(zoom) {
+        // fixme: duplicated (or at least similar to getTimelineElements)
+        var $elements = [],
+            units = getUnits(zoom),
+            n, value, width;
+        [1, 0].forEach(function(u) {
+            var unit = units[u],
+                value = unit.value(self.options.date),
+                width = Math.round(unit.seconds * getPixelsPerSecond(zoom)),
+                n = Math.ceil(self.options.width * 1.5/* * 16*/ / width);
+                Ox.loop(-n, n + 1, function(i) {
+                    if (u == 0 || Ox.mod(value + i, 2)) {
+                        $elements.push(
+                            new Ox.Element()
+                                .addClass(
+                                    u == 0 ? 'line' : ''
+                                )
+                                .css({
+                                    left: getPosition(unit.date(value + i), zoom) + 'px',
+                                    width: (u == 0 ? 1 : width) + 'px'
+                                })
+                        );
+                    }
+                });
+        });
+        return $elements;
+    }
+
     function getCalendarEvent(zoom) {
         var ms = self.options.width * getSecondsPerPixel(zoom) * 1000;
         return {
@@ -653,34 +681,6 @@ Ox.Calendar = function(options, self) {
         return $element;
     }
 
-    function getBackgroundElements(zoom) {
-        // fixme: duplicated
-        var $elements = [],
-            units = getUnits(zoom),
-            n, value, width;
-        [1, 0].forEach(function(u) {
-            var unit = units[u],
-                value = unit.value(self.options.date),
-                width = Math.round(unit.seconds * getPixelsPerSecond(zoom)),
-                n = Math.ceil(self.options.width * 1.5/* * 16*/ / width);
-                Ox.loop(-n, n + 1, function(i) {
-                    if (u == 0 || Ox.mod(value + i, 2)) {
-                        $elements.push(
-                            new Ox.Element()
-                                .addClass(
-                                    u == 0 ? 'line' : ''
-                                )
-                                .css({
-                                    left: getPosition(unit.date(value + i), zoom) + 'px',
-                                    width: (u == 0 ? 1 : width) + 'px'
-                                })
-                        );
-                    }
-                });
-        });
-        return $elements;
-    }
-
     function getTimelineElements(zoom) {
         var $elements = [],
             unit = getUnits(zoom)[0],
@@ -800,6 +800,7 @@ Ox.Calendar = function(options, self) {
 
     function panToSelected() {
         if (self.options.selected !== '') {
+            Ox.print('sos', self.options.selected, getSelectedEventElement())
             var line = getSelectedEventElement().data('line');
             panTo(getEventCenter(getSelectedEvent()), line);
         }
@@ -830,7 +831,7 @@ Ox.Calendar = function(options, self) {
             //types = ['date', 'place', 'person', 'other'];
         self.options.events.filter(function(event) {
             // filter out events with types not shown
-            // and events outside the visible area
+            // and events outside the visible area  <--  commented out to keep layout from changing
             return self.options.showTypes.indexOf(event.type) > -1
                 /*&& overlaps(event, calendarEvent)*/;
         }).sort(function(a, b) {
@@ -882,10 +883,12 @@ Ox.Calendar = function(options, self) {
                 // sort events by start, ascending
                 return a.startTime - b.startTime;
             }).forEach(function(event) {
-                if (overlaps(event, calendarEvent)) {
+                // append if selected or visible
-                    getEventElement(event)
+                if (
-                        .data({line: line})
+                    event.id == self.options.selected
-                        .appendTo($line);
+                    || overlaps(event, calendarEvent)
+                ) {
+                    getEventElement(event).data({line: line}).appendTo($line);
                 }
             });
         });
@@ -936,7 +939,10 @@ Ox.Calendar = function(options, self) {
     }
 
     function scrollBy(delta) {
-        scrollTo(self.$container.$element[0].scrollTop + delta * self.$container.height() / 2, true);
+        scrollTo(
+            self.$container.$element[0].scrollTop
+            + delta * self.$container.height() / 2, true
+        );
     }
 
     function scrollTo(top, animate) {