Display events in day view. Only works with non-conflicting events so far.

diff --git a/kronolith/js/src/kronolith.js b/kronolith/js/src/kronolith.js
index 4cf049d..94b8ee8 100644 (file)
--- a/kronolith/js/src/kronolith.js
+++ b/kronolith/js/src/kronolith.js
@@ -344,7 +344,9 @@ KronolithCore = {
     {
         switch (view) {
         case 'day':
+            $$('.kronolithEvent').invoke('remove');
             $('kronolithViewDay').down('.kronolithCol').setText(date.toString('D'));
+            this._loadEvents(date, date, this._loadEventsCallback.bind(this), view);
             break;
 
         case 'month':
@@ -582,18 +584,18 @@ KronolithCore = {
             if (typeof this.ecache[cal[0]] != 'undefined' &&
                 typeof this.ecache[cal[0]][cal[1]] != 'undefined') {
                 while (!Object.isUndefined(this.ecache[cal[0]][cal[1]].get(startDay.dateString())) &&
-                       startDay.compareTo(endDay) < 0) {
+                       startDay.isBefore(endDay)) {
                     date = startDay.dateString();
-                    $H(this.ecache[cal[0]][cal[1]].get(date)).each(function(event) { this._insertEvent(event, cal.join('|'), date); }, this);
+                    $H(this.ecache[cal[0]][cal[1]].get(date)).each(function(event) { this._insertEvent(event, cal.join('|'), date, view); }, this);
                     startDay.add(1).day();
                 }
                 while (!Object.isUndefined(this.ecache[cal[0]][cal[1]].get(endDay.dateString())) &&
-                       startDay.compareTo(endDay) < 0) {
+                       (startDay.isBefore(endDay) || startDay.equals(endDay))) {
                     date = endDay.dateString();
-                    $H(this.ecache[cal[0]][cal[1]].get(date)).each(function(event) { this._insertEvent(event, cal.join('|'), date); }, this);
+                    $H(this.ecache[cal[0]][cal[1]].get(date)).each(function(event) { this._insertEvent(event, cal.join('|'), date, view); }, this);
                     endDay.add(-1).day();
                 }
-                if (startDay.compareTo(endDay) == 0) {
+                if (startDay.compareTo(endDay) > 0) {
                     return;
                 }
             }
@@ -614,8 +616,6 @@ KronolithCore = {
      */
     _loadEventsCallback: function(r)
     {
-        var div;
-
         // Hide spinner.
         this.loading--;
         if (!this.loading) {
@@ -634,36 +634,57 @@ KronolithCore = {
 
             $H(r.response.events).each(function(date) {
                 $H(date.value).each(function(event) {
-                    this._insertEvent(event, r.response.cal, date.key);
+                    this._insertEvent(event, r.response.cal, date.key, this.view);
                 }, this);
             }, this);
         }
     },
 
-    _insertEvent: function(event, calendar, date)
+    _insertEvent: function(event, calendar, date, view)
     {
-        switch (this.view) {
-        case 'month':
-            div = new Element('DIV', {
-                'id': 'kronolithEventmonth' + calendar + event.key,
-                'calendar': calendar,
-                'eventid' : event.key,
-                'class': 'kronolithEvent',
-                'style': 'background-color:' + event.value.bg + ';color:' + event.value.fg
+        var div = new Element('DIV', {
+            'calendar': calendar,
+            'eventid' : event.key,
+            'class': 'kronolithEvent',
+            'style': 'background-color:' + event.value.bg + ';color:' + event.value.fg
+        });
+        div.setText(event.value.t)
+            .observe('mouseover', div.addClassName.curry('kronolithSelected'))
+            .observe('mouseout', div.removeClassName.curry('kronolithSelected'));
+        if (event.value.a) {
+            div.insert(' ')
+                .insert(new Element('IMG', { 'src': Kronolith.conf.URI_IMG + 'alarm-' + event.value.fg.substr(1) + '.png', 'title': Kronolith.text.alarm + ' ' + event.value.a }));
+        }
+        if (event.value.r) {
+            div.insert(' ')
+                .insert(new Element('IMG', { 'src': Kronolith.conf.URI_IMG + 'recur-' + event.value.fg.substr(1) + '.png', 'title': Kronolith.text.recur[event.value.r] }));
+        }
+
+        switch (view) {
+        case 'day':
+            div.writeAttribute('id', 'kronolithEventday' + calendar + event.key);
+            var midnight = Date.parseExact(date, 'yyyyMMdd'),
+                start = Date.parse(event.value.s),
+                end = Date.parse(event.value.e),
+                container = $('kronolithViewDay'),
+                tr = container.down('tbody tr').next('tr'),
+                td = tr.down('td'),
+                offset = tr.offsetTop - container.down('.kronolithAllDay').offsetTop,
+                height = tr.next('tr').offsetTop - tr.offsetTop,
+                spacing = height - tr.getHeight() + parseInt(td.getStyle('borderTopWidth')) + parseInt(td.getStyle('borderBottomWidth'));
+
+            div.setStyle({
+                'top': ((midnight.getElapsed(start) / 60000 | 0) * height / 60 + offset | 0) + 'px',
+                'height': ((start.getElapsed(end) / 60000 | 0) * height / 60 - spacing | 0) + 'px',
+                'width': '100%'
             });
-            div.setText(event.value.t)
-                .observe('mouseover', div.addClassName.curry('kronolithSelected'))
-                .observe('mouseout', div.removeClassName.curry('kronolithSelected'));
-            if (event.value.a) {
-                div.insert(' ')
-                    .insert(new Element('IMG', { 'src': Kronolith.conf.URI_IMG + 'alarm-' + event.value.fg.substr(1) + '.png', 'title': Kronolith.text.alarm + ' ' + event.value.a }));
-            }
-            if (event.value.r) {
-                div.insert(' ')
-                    .insert(new Element('IMG', { 'src': Kronolith.conf.URI_IMG + 'recur-' + event.value.fg.substr(1) + '.png', 'title': Kronolith.text.recur[event.value.r] }));
-            }
+            $('kronolithEventsDay').insert(div);
+            break;
+
+        case 'month':
+            div.writeAttribute('id', 'kronolithEventmonth' + calendar + event.key);
             $('kronolithMonthDay' + date).insert(div);
-            if (event.value.e) {
+            if (event.value.ed) {
                 div.setStyle({ 'cursor': 'move' });
                 new Drag('kronolithEventmonth' + calendar + event.key, { threshold: 5, parentElement: function() { return $('kronolithViewMonthBody'); }, snapToParent: true });
             }
@@ -979,7 +1000,7 @@ KronolithCore = {
                 e.stop();
                 return;
             }
-            
+
             calClass = elt.readAttribute('calendarclass');
             if (calClass) {
                 var calendar = elt.readAttribute('calendar');
@@ -1048,7 +1069,7 @@ KronolithCore = {
             this.eventForm = RedBox.getWindowContents();
         }
     },
-    
+
     _topTags: function(r)
     {
         $('kronolithEventTopTags').update();
@@ -1060,7 +1081,7 @@ KronolithCore = {
         });
         return;
     },
-    
+
     /**
      * Callback method for showing event forms.
      *
@@ -1091,7 +1112,7 @@ KronolithCore = {
                     return option.value == ev.r;
                 }).selected = true;
             }
-            if (ev.e) {
+            if (ev.ed) {
                 $('kronolithEventSave').show();
                 $('kronolithEventForm').enable();
             } else {

diff --git a/kronolith/lib/Event.php b/kronolith/lib/Event.php
index e9301c0..95fea9e 100644 (file)
--- a/kronolith/lib/Event.php
+++ b/kronolith/lib/Event.php
@@ -1011,9 +1011,11 @@ abstract class Kronolith_Event
         $json = new stdClass;
         $json->t = $this->getTitle();
         $json->c = $this->getCalendar();
+        $json->s = $this->start->toJSON();
+        $json->e = $this->end->toJSON();
         $json->bg = $this->_backgroundColor;
         $json->fg = $this->_foregroundColor;
-        $json->e = $this->hasPermission(PERMS_EDIT);
+        $json->ed = $this->hasPermission(PERMS_EDIT);
         $json->d = $this->hasPermission(PERMS_DELETE);
         if ($this->alarm) {
             if ($this->alarm % 10080 == 0) {

diff --git a/kronolith/templates/index/day.inc b/kronolith/templates/index/day.inc
index 9293cc5..1a5716b 100644 (file)
--- a/kronolith/templates/index/day.inc
+++ b/kronolith/templates/index/day.inc
@@ -1,4 +1,5 @@
 <div id="kronolithViewDay" class="kronolithView kronolithViewDay" style="display:none">
+<div id="kronolithEventsDay"></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 c53b99f..610fc85 100644 (file)
--- a/kronolith/themes/screen.css
+++ b/kronolith/themes/screen.css
@@ -983,6 +983,13 @@ div.kronolithView div.kronolithViewBody div.kronolithRow {
 .kronolithViewHead td {
     height: 20px;
 }
+#kronolithEventsDay {
+    position: absolute;
+    top: 27px;
+    right: 5px;
+    bottom: 3px;
+    left: 25px;
+}
 
 /* More main view */
 div.kronolithView div.kronolithViewBody div.kronolithRow div {
@@ -1129,16 +1136,16 @@ table.kronolithView td.kronolithToday {
 */
 
 /* Events */
-div.kronolithView div.kronolithViewBody div.kronolithRow div .kronolithEvent, .kronolithEvent {
+.kronolithEvent {
+    cursor: pointer;
+    overflow: hidden;
+}
+#kronolithViewMonth .kronolithEvent {
     width: auto;
     height: 15px;
     line-height: 15px;
     margin: 0 2px 2px 0;
     padding: 2px 5px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    overflow: hidden;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
 }
@@ -1148,16 +1155,12 @@ div.kronolithView div.kronolithViewBody div.kronolithRow div .kronolithEvent.kro
 div.kronolithView div.kronolithViewBody div.kronolithRow div .kronolithEvent.kronolithEventFull {
     color: white !important;
 }
-div.kronolithView .kronolithEvents .kronolithEvent {
+#kronolithViewDay .kronolithEvent {
     position: absolute;
-    z-index: 100;
-    width: 12%;
-    margin: 5px;
     opacity: .8;
     filter: alpha(opacity=80);
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
-    color: white;
 }
 div.kronolithViewWeek .kronolithEvents .kronolithEvent {
     width: 11%;
@@ -1189,7 +1192,7 @@ div.kronolithView .kronolithEvents .kronolithEvent .kronolithEventInfo {
     margin: 10px 0;
     padding: 5px;
 }
-.kronolithEvent.kronolithSelected {
+#kronolithViewMonth .kronolithEvent.kronolithSelected {
     height: auto;
 }