Add spacing between day/week events. Tweak aligning of week events.

diff --git a/kronolith/js/src/kronolith.js b/kronolith/js/src/kronolith.js
index 8c1bc11..8bfd451 100644 (file)
--- a/kronolith/js/src/kronolith.js
+++ b/kronolith/js/src/kronolith.js
@@ -750,8 +750,7 @@ KronolithCore = {
                 'id': event.value.nodeId,
                 'calendar': calendar,
                 'eventid' : event.key,
-                'class': 'kronolithEvent',
-                'style': 'background-color:' + event.value.bg + ';color:' + event.value.fg
+                'class': 'kronolithEvent'
             });
         };
 
@@ -760,37 +759,38 @@ KronolithCore = {
         case 'week':
             this._calculateRowSizes('daySizes', view == 'day' ? 'kronolithViewDay' : 'kronolithViewWeek');
             event.value.nodeId = 'kronolithEventday' + calendar + event.key;
-            var div = _createElement(event, calendar);
-
-            var midnight = Date.parseExact(date, 'yyyyMMdd'),
-                start = Date.parse(event.value.s),
-                end = Date.parse(event.value.e),
-                innerDiv = new Element('DIV', { 'class': 'kronolithEventInfo' });
+            var div = _createElement(event, calendar),
+                style = { 'backgroundColor': event.value.bg,
+                          'color': event.value.fg };
 
             if (event.value.al) {
                 if (view == 'day') {
-                    $('kronolithViewDayBody').down('td').next('td').insert(div);
+                    $('kronolithViewDayBody').down('td').next('td').insert(div.setStyle(style));
                 } else {
-                    $('kronolithAllDay' + date).insert(div);
+                    $('kronolithAllDay' + date).insert(div.setStyle(style));
                 }
                 break;
             }
 
+            var midnight = Date.parseExact(date, 'yyyyMMdd'),
+                start = Date.parse(event.value.s),
+                end = Date.parse(event.value.e),
+                innerDiv = new Element('DIV', { 'class': 'kronolithEventInfo' });
+
             div.setStyle({
                 'top': event.value.al
                     ? 0
                     : ((midnight.getElapsed(start) / 60000 | 0) * this.daySizes.height / 60 + this.daySizes.offset | 0) + 'px',
                 'height': event.value.al
                     ? this.daySizes.allDay + 'px'
-                    : ((start.getElapsed(end) / 60000 | 0) * this.daySizes.height / 60 - this.daySizes.spacing | 0) + 'px',
-                'width': '100%'
+                    : ((start.getElapsed(end) / 60000 | 0) * this.daySizes.height / 60 - this.daySizes.spacing | 0) + 'px'
             })
-                .insert(new Element('DIV', { 'class': 'kronolithDragger kronolithDraggerTop' }))
-                .insert(innerDiv)
-                .insert(new Element('DIV', { 'class': 'kronolithDragger kronolithDraggerBottom' }));
+                .insert(innerDiv.setStyle(style))
+                .insert(new Element('DIV', { 'class': 'kronolithDragger kronolithDraggerTop' }).setStyle(style))
+                .insert(new Element('DIV', { 'class': 'kronolithDragger kronolithDraggerBottom' }).setStyle(style));
             $(view == 'day' ? 'kronolithEventsDay' : 'kronolithEventsWeek' + date).insert(div);
 
-            var column = 1, columns, width = 100, conflict = false,
+            var column = 1, columns, width, left, conflict = false,
                 pos = this.dayGroups.length, placeFound = false;
 
             this.dayEvents.each(function(ev) {
@@ -844,7 +844,10 @@ KronolithCore = {
 
         case 'month':
             event.value.nodeId = 'kronolithEventmonth' + calendar + event.key;
-            var div = _createElement(event, calendar);
+            var div = _createElement(event, calendar)
+                .setStyle({ 'backgroundColor': event.value.bg,
+                            'color': event.value.fg });
+
             $('kronolithMonthDay' + date).insert(div);
             if (event.value.ed) {
                 div.setStyle({ 'cursor': 'move' });

diff --git a/kronolith/themes/screen.css b/kronolith/themes/screen.css
index e1b8893..8c96ea3 100644 (file)
--- a/kronolith/themes/screen.css
+++ b/kronolith/themes/screen.css
@@ -1185,12 +1185,13 @@ div.kronolithViewWeek .kronolithEvents .kronolithEvent {
 }
 .kronolithEvent .kronolithDragger {
     position: absolute;
-    width: 100%;
+    left: 0;
+    right: 3px;
     height: 12px;
     background: transparent url("graphics/drag-handle.png") center center no-repeat;
 }
 .kronolithEvent:hover .kronolithDragger, .kronolithEvent.kronolithSelected .kronolithDragger {
-    background-color: #202020;
+    background-color: #202020 !important;
 }
 .kronolithEvent .kronolithDragger.kronolithDraggerTop {
     top: 0;
@@ -1207,8 +1208,13 @@ div.kronolithViewWeek .kronolithEvents .kronolithEvent {
     cursor: s-resize;
 }
 .kronolithEvent .kronolithEventInfo {
-    margin: 10px 0;
+    position: absolute;
+    top: 7px;
+    right: 3px;
+    bottom: 7px;
+    left: 0;
     padding: 5px;
+    overflow: hidden;
 }
 #kronolithViewMonth .kronolithEvent.kronolithSelected, #kronolithViewDay .kronolithAllDay .kronolithEvent.kronolithSelected, #kronolithViewWeek .kronolithAllDay .kronolithEvent.kronolithSelected {
     height: auto;