Render events in week view.

diff --git a/kronolith/js/src/kronolith.js b/kronolith/js/src/kronolith.js
index 4820cc1..4e55542 100644 (file)
--- a/kronolith/js/src/kronolith.js
+++ b/kronolith/js/src/kronolith.js
@@ -354,6 +354,20 @@ KronolithCore = {
             $('kronolithViewDay').down('.kronolithCol').setText(date.toString('D'));
             break;
 
+        case 'week':
+            this.dayEvents = [];
+            this.dayGroups = [];
+            this.allDayEvents = [];
+            var div = $('kronolithEventsWeek').down('div'),
+                dates = this.viewDates(date, view),
+                day = dates[0].clone();
+            for (var i = 0; i < 7; i++) {
+                div.writeAttribute('id', 'kronolithEventsWeek' + day.dateString());
+                div = div.next('div');
+                day.next().day();
+            }
+            break;
+
         case 'month':
             var tbody = $('kronolithViewMonthBody'),
                 dates = this.viewDates(date, view),
@@ -448,6 +462,35 @@ KronolithCore = {
     },
 
     /**
+     * Calculates some dimensions for the day and week view.
+     *
+     * @param string storage  Property name where the dimensions are stored.
+     * @param string view     DOM node ID of the view.
+     */
+    _calculateRowSizes: function(storage, view)
+    {
+        if (!Object.isUndefined(this[storage])) {
+            return;
+        }
+
+        this[storage] = {};
+        var container = $(view),
+            trA = container.down('.kronolithAllDay'),
+            tdA = trA.down('td'),
+            tr = trA.next('tr'),
+            td = tr.down('td'), height;
+        this[storage].offset = tr.offsetTop - trA.offsetTop;
+        this[storage].height = tr.next('tr').offsetTop - tr.offsetTop;
+        this[storage].spacing = this[storage].height - tr.getHeight()
+            + parseInt(td.getStyle('borderTopWidth'))
+            + parseInt(td.getStyle('borderBottomWidth'));
+        this[storage].allDay = tr.offsetTop - trA.offsetTop;
+        this[storage].allDay -= this[storage].allDay - trA.getHeight()
+            + parseInt(td.getStyle('borderTopWidth'))
+            + parseInt(tdA.getStyle('borderBottomWidth'));
+    },
+
+    /**
      * Rebuilds the mini calendar.
      *
      * @param Date date    The date to show in the calendar.
@@ -651,25 +694,30 @@ KronolithCore = {
      */
     _insertEvents: function(dates, view, calendar)
     {
-        switch (view) {
-        case 'day':
-            // The day view requires the view to be completely loaded, to
-            // correctly calculate the dimensions.
+        if (view == 'day' || view == 'week') {
+            // The day and week views require the view to be completely
+            // loaded, to correctly calculate the dimensions.
             if (this.viewLoading || this.view != view) {
                 this._insertEvents.bind(this, dates, view, calendar).defer();
                 return;
             }
-
-            // We have recreate events from all calendars in
-            $$('.kronolithEvent').invoke('remove');
-            this.dayEvents = [];
-            this.dayGroups = [];
-            this.allDayEvents = [];
         }
 
         dates.each(function(date) {
+            if (view == 'day' || view == 'week') {
+                this.dayEvents = [];
+                this.dayGroups = [];
+                this.allDayEvents = [];
+                if (view == 'day') {
+                    $$('.kronolithEvent').invoke('remove');
+                } else {
+                    $('kronolithEventsWeek' + date)
+                        .select('.kronolithEvent')
+                        .invoke('remove');
+                }
+            }
             this._getCacheForDate(date).sortBy(this._sortEvents).each(function(event) {
-                if (view != 'day' &&
+                if ((view != 'day' && view != 'week') &&
                     calendar && calendar != event.value.calendar) {
                     return;
                 }
@@ -703,25 +751,8 @@ KronolithCore = {
 
         switch (view) {
         case 'day':
-            if (Object.isUndefined(this.daySizes)) {
-                /* Calculate some dimensions for the day view. */
-                this.daySizes = {};
-                var container = $('kronolithViewDay'),
-                    trA = container.down('.kronolithAllDay'),
-                    tdA = trA.down('td'),
-                    tr = trA.next('tr'),
-                    td = tr.down('td'), height;
-                this.daySizes.offset = tr.offsetTop - trA.offsetTop;
-                this.daySizes.height = tr.next('tr').offsetTop - tr.offsetTop;
-                this.daySizes.spacing = this.daySizes.height - tr.getHeight()
-                    + parseInt(td.getStyle('borderTopWidth'))
-                    + parseInt(td.getStyle('borderBottomWidth'));
-                this.daySizes.allDay = tr.offsetTop - trA.offsetTop;
-                this.daySizes.allDay -= this.daySizes.allDay - trA.getHeight()
-                    + parseInt(td.getStyle('borderTopWidth'))
-                    + parseInt(tdA.getStyle('borderBottomWidth'));
-            }
-
+        case 'week':
+            this._calculateRowSizes('daySizes', view == 'day' ? 'kronolithViewDay' : 'kronolithViewWeek');
             event.value.nodeId = 'kronolithEventday' + calendar + event.key;
             var div = _createElement(event, calendar);
 
@@ -742,7 +773,7 @@ KronolithCore = {
                 .insert(new Element('DIV', { 'class': 'kronolithDragger kronolithDraggerTop' }))
                 .insert(innerDiv)
                 .insert(new Element('DIV', { 'class': 'kronolithDragger kronolithDraggerBottom' }));
-            $('kronolithEventsDay').insert(div);
+            $(view == 'day' ? 'kronolithEventsDay' : 'kronolithEventsWeek' + date).insert(div);
 
             if (event.value.al) {
                 this.allDayEvents.push(event.value);
@@ -809,9 +840,6 @@ KronolithCore = {
             div = innerDiv;
             break;
 
-        case 'week':
-            return;
-
         case 'month':
             event.value.nodeId = 'kronolithEventmonth' + calendar + event.key;
             var div = _createElement(event, calendar);
@@ -1022,7 +1050,6 @@ KronolithCore = {
 
     onResize: function(noupdate, nowait)
     {
-        this._resizeIE6();
     },
 
     /* Keydown event handler */

diff --git a/kronolith/templates/index/week.inc b/kronolith/templates/index/week.inc
index 2077449..dafb511 100644 (file)
--- a/kronolith/templates/index/week.inc
+++ b/kronolith/templates/index/week.inc
@@ -1,4 +1,13 @@
 <div id="kronolithViewWeek" class="kronolithView kronolithViewWeek" style="display:none">
+<div id="kronolithEventsWeek">
+  <div class="kronolithEventsWeek"></div>
+  <div class="kronolithEventsWeek"></div>
+  <div class="kronolithEventsWeek"></div>
+  <div class="kronolithEventsWeek"></div>
+  <div class="kronolithEventsWeek"></div>
+  <div class="kronolithEventsWeek"></div>
+  <div class="kronolithEventsWeek"></div>
+</div>
 <table class="kronolithView kronolithViewDay">
   <thead class="kronolithViewHead"><tr>
     <td class="kronolithFirstCol">&nbsp;</td>

diff --git a/kronolith/themes/screen.css b/kronolith/themes/screen.css
index 80f093b..bdfbd37 100644 (file)
--- a/kronolith/themes/screen.css
+++ b/kronolith/themes/screen.css
@@ -990,6 +990,22 @@ div.kronolithView div.kronolithViewBody div.kronolithRow {
     bottom: 3px;
     left: 25px;
 }
+#kronolithEventsWeek {
+    position: absolute;
+    top: 26px;
+    right: 4px;
+    bottom: 2px;
+    left: 24px;
+}
+.kronolithEventsWeek {
+    position: relative;
+    float: left;
+    height: 100%;
+    width: 14.2857%;
+}
+.kronolithEventsWeek .kronolithEvent {
+    margin: 1px 3px 1px 1px;
+}
 
 /* More main view */
 div.kronolithView div.kronolithViewBody div.kronolithRow div {
@@ -1139,8 +1155,10 @@ table.kronolithView td.kronolithToday {
 .kronolithEvent {
     cursor: pointer;
     overflow: hidden;
+    position: absolute;
 }
 #kronolithViewMonth .kronolithEvent {
+    position: relative;
     width: auto;
     height: 15px;
     line-height: 15px;
@@ -1305,4 +1323,4 @@ li.panel-tags {
     background-image: url("graphics/warning.png");
     border-color: #807b00;
     color: #000;
-}
\ No newline at end of file
+}