diff --git a/demos/calendar/js/calendar.js b/demos/calendar/js/calendar.js
index 072cf023..ef987f18 100644
--- a/demos/calendar/js/calendar.js
+++ b/demos/calendar/js/calendar.js
@@ -11,7 +11,7 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
 
     //Ox.print('$$$$', Ox.Calendar)
 
-    Ox.Calendar({
+    var $calendar = Ox.Calendar({
         date: new Date(0),
         events: [
 
@@ -623,8 +623,41 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
         ],
         height: window.innerHeight,
         range: [-5000, 5000],
-        width: window.innerWidth,
+        width: window.innerWidth - 257,
         zoom: 2
-    }).appendTo(Ox.UI.$body).gainFocus();
+    });
+
+    var $panel = Ox.SplitPanel({
+        elements: [
+            {
+                element: $calendar
+            },
+            {
+                collapsible: true,
+                element: Ox.Element(),
+                resizable: true,
+                resize: [128, 256, 384],
+                size: 256
+            }
+        ],
+        orientation: 'horizontal'
+    }).appendTo(Ox.UI.$body);
+
+    $calendar
+        .bindEvent({
+            resize: function(foo, size) {
+                $calendar.options({width: window.innerWidth - $panel.getSize(1)});
+            }
+        })
+        .gainFocus();
+
+    Ox.UI.$window.bind({
+        resize: function(e) {
+            $calendar.options({
+                height: window.innerHeight,
+                width: window.innerWidth - $panel.getSize(1)
+            });
+        }
+    });
 
 });
\ No newline at end of file
diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css
index 811c4e4b..2d06b280 100644
--- a/source/Ox.UI/css/Ox.UI.css
+++ b/source/Ox.UI/css/Ox.UI.css
@@ -109,6 +109,7 @@ Calendar
 
 .OxCalendar {
     position: absolute;
+    overflow: hidden;
 }
 
 .OxCalendar > .OxCalendarContainer {
diff --git a/source/Ox.UI/js/Calendar/Ox.Calendar.js b/source/Ox.UI/js/Calendar/Ox.Calendar.js
index 8bb275b7..cb2fbd60 100644
--- a/source/Ox.UI/js/Calendar/Ox.Calendar.js
+++ b/source/Ox.UI/js/Calendar/Ox.Calendar.js
@@ -318,7 +318,7 @@ Ox.Calendar = function(options, self) {
                 self.options.showTypes = data.selected.map(function(type) {
                     return type.id;
                 });
-                self.lineEvents = getLineEvents();
+                getLines();
                 renderCalendar();
             }
         })
@@ -413,7 +413,7 @@ Ox.Calendar = function(options, self) {
         });
     
     self.$lines = [];
-    self.lineEvents = getLineEvents();
+    getLines();
     renderCalendar();
 
     function changeDate() {
@@ -599,9 +599,6 @@ Ox.Calendar = function(options, self) {
             paddingLeft = 0;
             width = getPosition(event.endTime, zoom) - left;
         }
-        if (event.name == 'Martin Luther') {
-            Ox.print('left', left, 'pL', paddingLeft, 'width', width)
-        }
         return new Ox.Element()
             .addClass('OxEvent' + 
                 (event.type ? ' Ox' + Ox.toTitleCase(event.type) : '' ) +
@@ -778,6 +775,7 @@ Ox.Calendar = function(options, self) {
     }
 
     function panTo(date, line) {
+        Ox.print('panning???')
         var delta = Math.round((date - self.options.date) / 1000 * getPixelsPerSecond()),
             // 250 ms for half the width of the visible area
             ms = 250 * Math.min(Math.abs(delta) / (self.$content.width() / 2), 1);
@@ -802,18 +800,18 @@ 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);
-        }
+        // fixme: '0' should zoom to selected if selected is already centered
+        // (both horizontally and vertically, the latter is a bit more work)
+        self.options.selected !== '' && panTo(
+            getEventCenter(getSelectedEvent()),
+            getSelectedEventElement().data('line')
+        );
     }
 
     function renderBackground() {
         getBackgroundElements(self.options.zoom).forEach(function($element) {
             $element.appendTo(self.$background);
         });
-        
     }
 
     function renderCalendar() {
@@ -828,8 +826,8 @@ Ox.Calendar = function(options, self) {
         });
     }
 
-    function getLineEvents() {
-        var lineEvents = [];
+    function getLines() {
+        self.lineEvents = [];
         self.$content.find('.OxLine').remove();
         self.options.events.filter(function(event) {
             // filter out events with types not shown
@@ -852,9 +850,9 @@ Ox.Calendar = function(options, self) {
                 return a.startTime - b.startTime;
             }
         }).forEach(function(event, i) {
-            var line = lineEvents.length;
+            var line = self.lineEvents.length;
             // traverse lines
-            Ox.forEach(lineEvents, function(events, line_) {
+            Ox.forEach(self.lineEvents, function(events, line_) {
                 var fits = true;
                 // traverse events in line
                 Ox.forEach(events, function(event_) {
@@ -869,8 +867,8 @@ Ox.Calendar = function(options, self) {
                     return false;
                 }
             });
-            if (line == lineEvents.length) {
-                lineEvents[line] = [];
+            if (line == self.lineEvents.length) {
+                self.lineEvents[line] = [];
                 self.$lines[line] = new Ox.Element()
                     .addClass('OxLine')
                     .css({
@@ -878,13 +876,12 @@ Ox.Calendar = function(options, self) {
                     })
                     .appendTo(self.$content);
             }
-            lineEvents[line].push(event);            
+            self.lineEvents[line].push(event);            
         });
         self.contentHeight = Math.max(
-            lineEvents.length * 16, self.$container.height()
+            self.lineEvents.length * 16, self.$container.height()
         );
         self.$content.css({height: self.contentHeight + 'px'});
-        return lineEvents;
     }
 
     function renderEvents() {
@@ -970,7 +967,6 @@ Ox.Calendar = function(options, self) {
         } else {
             self.$container.$element[0].scrollTop = top;
         }
-        Ox.print('scrollTo', top)
     }
 
     function selectEvent(id, $element) {
@@ -1037,6 +1033,13 @@ Ox.Calendar = function(options, self) {
     self.setOption = function(key, val) {
         if (key == 'date') {
             
+        } else if (key == 'height') {
+            that.css({height: self.options.height + 'px'});
+        } else if (key == 'width') {
+            that.css({width: self.options.width + 'px'});
+            self.$zoomInput.options({size: self.options.width});
+            getLines();
+            renderCalendar();
         } else if (key == 'zoom') {
             
         }