Add simple popup to event

There is not a lot of infomation to display, yet.

2 files changed, 54 insertions, 6 deletions

diff --git a/apps/calendar/css/style.css b/apps/calendar/css/style.css
index a06a5c43234..77763db976c 100644
--- a/apps/calendar/css/style.css
+++ b/apps/calendar/css/style.css
@@ -53,5 +53,7 @@
 .weekend .events{text-align: center;margin: 0;	padding: 0;vertical-align: top;background: #F3F3F3; width: 100%; }
 .weekend_thead, .weekend_row{height: 20px;text-align: center;text-align: center;background: #F3F3F3;}
 .thisday{background: #FFFABC;text-align: center;margin: 0;padding: 0;vertical-align: top;height: 20px;}
+.event {position:relative;}
+.event_popup {display: none; position: absolute; width: 280px; height: 40px; padding: 10px; background: #eeeeee; color: #000000; border: 1px solid #1a1a1a; font-size: 90%;}
 
 input[type="button"].active {color: #0098E4}
diff --git a/apps/calendar/js/calendar.js b/apps/calendar/js/calendar.js
index e903f909f8a..c3048295df1 100644
--- a/apps/calendar/js/calendar.js
+++ b/apps/calendar/js/calendar.js
@@ -263,9 +263,55 @@ Calendar={
 		addEventLabel:function(eventcontainer, event){
 			var event_holder = this.current.createEventLabel(event)
 				.addClass('event')
-				.data('event_info', event);
+				.data('event_info', event)
+				.hover(this.createEventPopup,
+				       this.hideEventPopup);
 			eventcontainer.append(event_holder);
 		},
+		createEventPopup:function(e){
+			var event = $(this).data('event_info');
+			var popup = $(this).data('popup');
+			if (!popup){
+				popup = $(document.createElement('div'));
+				$(this).data('popup', popup).append(popup);
+				popup.addClass('event_popup')
+					.html(Calendar.UI.getEventPopupText(event));
+			}
+			popup.css('left', -(popup.width() - $(this).width())/2)
+				.show();
+		},
+		hideEventPopup:function(){
+			$(this).data('popup').hide();
+		},
+		getEventPopupText:function(event){
+			var startdate = this.formatDate(event.startdate)
+			var starttime = this.formatTime(event.startdate)
+			var enddate = this.formatDate(event.enddate)
+			var endtime = this.formatTime(event.enddate)
+			if (event.allday){
+				var timespan = startdate;
+				if (event.startdate[2] != parseInt(event.enddate[2])-1){
+					timespan += ' - ' + enddate;
+				}
+			}else{
+				var start = startdate + ' ' + starttime;
+				if (startdate == enddate){
+					var end = endtime;
+				}else{
+					var end = enddate + ' ' + endtime;
+				}
+				var timespan = start + ' - ' + end;
+			}
+			return '<span class="timespan">' + timespan + '</span>'
+				+ ' '
+				+ '<span class="summary">' + event.description + '</span>';
+		},
+		formatDate:function(date){
+			return date[0] + '-' + date[1] + '-' + date[2];
+		},
+		formatTime:function(date){
+			return date[3] + ':' + date[4];
+		},
 		OneDay:{
 			forward:function(){
 				Calendar.Date.forward_day();
@@ -301,7 +347,7 @@ Calendar={
 			createEventLabel:function(event){
 				var time = '';
 				if (!event['allday']){
-					time = '<strong>' + event['startdate'][3] + ':' + event['startdate'][4] + ' - ' + event['enddate'][3] + ':' + event['enddate'][4] + '</strong> ';
+					time = '<strong>' + Calendar.UI.formatTime(event['startdate']) + ' - ' + Calendar.UI.formatTime(event['enddate']) + '</strong> ';
 				}
 				return $(document.createElement('p'))
 					.html(time + event['description'])
@@ -360,7 +406,7 @@ Calendar={
 			createEventLabel:function(event){
 				var time = '';
 				if (!event['allday']){
-					time = '<strong>' + event['startdate'][3] + ':' + event['startdate'][4] + ' - ' + event['enddate'][3] + ':' + event['enddate'][4] + '</strong> ';
+					time = '<strong>' + Calendar.UI.formatTime(event['startdate']) + ' - ' + Calendar.UI.formatTime(event['enddate']) + '</strong> ';
 				}
 				return $(document.createElement('p'))
 					.html(time + event['description'])
@@ -494,7 +540,7 @@ Calendar={
 			createEventLabel:function(event){
 				var time = '';
 				if (!event['allday']){
-					time = '<strong>' + event['startdate'][3] + ':' + event['startdate'][4] + '</strong> ';
+					time = '<strong>' + Calendar.UI.formatTime(event['startdate']) + '</strong> ';
 				}
 				return $(document.createElement('p'))
 					.html(time + event['description'])
@@ -638,7 +684,7 @@ Calendar={
 			createEventLabel:function(event){
 				var time = '';
 				if (!event['allday']){
-					time = '<strong>' + event['startdate'][3] + ':' + event['startdate'][4] + '</strong> ';
+					time = '<strong>' + Calendar.UI.formatTime(event['startdate']) + '</strong> ';
 				}
 				return $(document.createElement('p'))
 					.html(time + event['description'])
@@ -729,7 +775,7 @@ Calendar={
 			createEventLabel:function(event){
 				var time = '';
 				if (!event['allday']){
-					time = event['startdate'][3] + ':' + event['startdate'][4] + ' - ' + event['enddate'][3] + ':' + event['enddate'][4] + ' ';
+					time = Calendar.UI.formatTime(event['startdate']) + ' - ' + Calendar.UI.formatTime(event['enddate']) + ' ';
 				}
 				return $(document.createElement('p'))
 					.html(time + event['description'])