Render all-day events like month events.
authorJan Schneider <jan@horde.org>
Tue, 7 Apr 2009 13:14:28 +0000 (15:14 +0200)
committerJan Schneider <jan@horde.org>
Tue, 7 Apr 2009 17:55:02 +0000 (19:55 +0200)
kronolith/js/src/kronolith.js
kronolith/templates/index/day.inc
kronolith/templates/index/week.inc
kronolith/themes/screen.css

index 4e55542..b64331b 100644 (file)
@@ -359,11 +359,14 @@ KronolithCore = {
             this.dayGroups = [];
             this.allDayEvents = [];
             var div = $('kronolithEventsWeek').down('div'),
+                td = $('kronolithViewWeekBody').down('td').next('td'),
                 dates = this.viewDates(date, view),
                 day = dates[0].clone();
             for (var i = 0; i < 7; i++) {
                 div.writeAttribute('id', 'kronolithEventsWeek' + day.dateString());
+                td.writeAttribute('id', 'kronolithAllDay' + day.dateString());
                 div = div.next('div');
+                td = td.next('td');
                 day.next().day();
             }
             break;
@@ -714,6 +717,9 @@ KronolithCore = {
                     $('kronolithEventsWeek' + date)
                         .select('.kronolithEvent')
                         .invoke('remove');
+                    $('kronolithAllDay' + date)
+                        .select('.kronolithEvent')
+                        .invoke('remove');
                 }
             }
             this._getCacheForDate(date).sortBy(this._sortEvents).each(function(event) {
@@ -761,6 +767,15 @@ KronolithCore = {
                 end = Date.parse(event.value.e),
                 innerDiv = new Element('DIV', { 'class': 'kronolithEventInfo' });
 
+            if (event.value.al) {
+                if (view == 'day') {
+                    $('kronolithViewDayBody').down('td').next('td').insert(div);
+                } else {
+                    $('kronolithAllDay' + date).insert(div);
+                }
+                break;
+            }
+
             div.setStyle({
                 'top': event.value.al
                     ? 0
@@ -775,19 +790,6 @@ KronolithCore = {
                 .insert(new Element('DIV', { 'class': 'kronolithDragger kronolithDraggerBottom' }));
             $(view == 'day' ? 'kronolithEventsDay' : 'kronolithEventsWeek' + date).insert(div);
 
-            if (event.value.al) {
-                this.allDayEvents.push(event.value);
-                var width = 100 / this.allDayEvents.length;
-                for (var i = 0; i < this.allDayEvents.length; i++) {
-                    $(this.allDayEvents[i].nodeId).setStyle({
-                        'width': width + '%',
-                        'left': i * width + '%'
-                    });
-                }
-                div = innerDiv;
-                break;
-            }
-
             var column = 1, columns, width = 100, conflict = false,
                 pos = this.dayGroups.length, placeFound = false;
 
index 1a5716b..4280793 100644 (file)
@@ -5,7 +5,7 @@
     <td class="kronolithFirstCol">&nbsp;</td>
     <td class="kronolithCol"><span></span></td>
   </tr></thead>
-  <tbody class="kronolithViewBody">
+  <tbody id="kronolithViewDayBody" class="kronolithViewBody">
     <tr class="kronolithRow kronolithAllDay">
       <td class="kronolithFirstCol"><?php echo _("All day") ?></td>
       <td class="kronolithCol"></td>
index dafb511..0526dbf 100644 (file)
@@ -15,7 +15,7 @@
     <td class="kronolithCol"><span><?php echo NLS::getLangInfo(constant('DAY_' . ($i % 7 + 1))) ?></span></td>
     <?php endfor; ?>
   </tr></thead>
-  <tbody class="kronolithViewBody">
+  <tbody id="kronolithViewWeekBody" class="kronolithViewBody">
     <tr class="kronolithRow kronolithAllDay">
       <td class="kronolithFirstCol"><?php echo _("All day") ?></td>
       <td class="kronolithCol<?php if ($w == 6 || $w == 0) echo ' kronolithWeekend' ?>">
index bdfbd37..e1b8893 100644 (file)
@@ -1157,29 +1157,29 @@ table.kronolithView td.kronolithToday {
     overflow: hidden;
     position: absolute;
 }
-#kronolithViewMonth .kronolithEvent {
-    position: relative;
-    width: auto;
-    height: 15px;
-    line-height: 15px;
-    margin: 0 2px 2px 0;
-    padding: 2px 5px;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-}
 div.kronolithView div.kronolithViewBody div.kronolithRow div .kronolithEvent.kronolithSelected {
     height: auto;
 }
 div.kronolithView div.kronolithViewBody div.kronolithRow div .kronolithEvent.kronolithEventFull {
     color: white !important;
 }
-#kronolithViewDay .kronolithEvent {
+#kronolithViewDay .kronolithEvent, #kronolithViewWeek .kronolithEvent {
     position: absolute;
     opacity: .8;
     filter: alpha(opacity=80);
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
 }
+#kronolithViewMonth .kronolithEvent, #kronolithViewDay .kronolithAllDay .kronolithEvent, #kronolithViewWeek .kronolithAllDay .kronolithEvent {
+    position: relative;
+    width: auto;
+    height: 15px;
+    line-height: 15px;
+    margin: 0 2px 2px 0;
+    padding: 2px 5px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+}
 div.kronolithViewWeek .kronolithEvents .kronolithEvent {
     width: 11%;
 }
@@ -1210,7 +1210,7 @@ div.kronolithViewWeek .kronolithEvents .kronolithEvent {
     margin: 10px 0;
     padding: 5px;
 }
-#kronolithViewMonth .kronolithEvent.kronolithSelected {
+#kronolithViewMonth .kronolithEvent.kronolithSelected, #kronolithViewDay .kronolithAllDay .kronolithEvent.kronolithSelected, #kronolithViewWeek .kronolithAllDay .kronolithEvent.kronolithSelected {
     height: auto;
 }