Better event popup

apps/calendar/css/style.css

@@ -24,8 +24,6 @@
 #listview #events {width:25em;padding: 4px;}
 #listview #events .day {width:auto;padding-left:10px;border-bottom: 2px solid #EEEEEE;text-align:left;}
 
-#sysbox{display: none;}
-
 .actions {height: 33px;	min-width: 800px;}
 .controls {min-width: 800px;}
 .center {text-align: center;}
@@ -99,3 +97,31 @@ button.category{margin:0 3px;}
 {
      cursor: pointer;
 }
+.tipsy-event .tipsy-inner{
+background-color:#0098E4;
+border:2px solid #1d2d44;
+max-width:400px;
+padding:0;
+}
+.tipsy-event .tipsy-arrow-s{
+border-top-color:#1d2d44;
+}
+.tipsy-event .tipsy-arrow-n{
+border-bottom-color:#1d2d44;
+}
+.tipsy-event .summary,
+.tipsy-event .timespan,
+.tipsy-event .description{
+padding:0 8px;
+}
+.tipsy-event .summary{
+background-color:#1d2d44;
+font-size:1.2em;
+font-weight:bold;
+text-align:left;
+padding:0 8px 2px;
+}
+.tipsy-event .description{
+line-height:1.2;
+margin-bottom:4px;
+}

apps/calendar/js/calendar.js

@@ -148,32 +148,20 @@ Calendar={
 			$("#advanced_options").css("display", "block");
 			$("#advanced_options_button").css("display", "none");
 		},
-		createEventPopup:function(event, e, view){
-			var popup = $(this).data('popup');
-			if (!popup){
-				popup = $(document.createElement('div'));
-				$(this).data('popup', popup).append(popup);
-				popup.addClass('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){
 			if (event.allDay){
-				var timespan = $.fullCalendar.formatDates(event.start, event.end, t('calendar', "MMMM d[ yyyy]{ '—'[ MMMM][ d] yyyy}"));
+				var timespan = $.fullCalendar.formatDates(event.start, event.end, t('calendar', "ddd d MMMM[ yyyy]{ -[ddd d] MMMM yyyy}"));
 			}else{
-				var timespan = $.fullCalendar.formatDates(event.start, event.end, t('calendar', "HH:mm[ MMMM d yyyy]{ '—' HH:mm MMMM d yyyy}"));
+				var timespan = $.fullCalendar.formatDates(event.start, event.end, t('calendar', "ddd d MMMM[ yyyy] HH:mm{ -[ ddd d MMMM yyyy] HH:mm}"));
 				// Tue 18 October 2011 08:00 - 16:00
 			}
-			return '<span class="timespan">' + timespan + '</span>'
-				+ ' '
-				+ '<span class="summary">' + event.title + '</span>'
-				+ '<span class="description">' + event.description + '</span>';
+			var html =
+				'<div class="summary">' + event.title + '</div>' +
+				'<div class="timespan">' + timespan + '</div>';
+			if (event.description){
+				html += '<div class="description">' + event.description + '</div>';
+			}
+			return html;
 		},
 		lockTime:function(){
 			if($('#allday_checkbox').is(':checked')) {
@@ -522,8 +510,19 @@ $(document).ready(function(){
 		eventClick: Calendar.UI.editEvent,
 		eventDrop: Calendar.UI.moveEvent,
 		eventResize: Calendar.UI.resizeEvent,
-		eventMouseover: Calendar.UI.createEventPopup,
-		eventMouseout: Calendar.UI.hideEventPopup,
+		eventRender: function(event, element) {
+			element.tipsy({
+				className: 'tipsy-event',
+				opacity: 0.9,
+				gravity:$.fn.tipsy.autoBounds(150, 's'),
+				fade:true,
+				delayIn: 400,
+				html:true,
+				title:function() {
+					return Calendar.UI.getEventPopupText(event);
+				}
+			});
+		},
 		eventSources: eventSources
 	});
 	$('#oneweekview_radio').click(function(){