Better event popup

diff --git a/apps/calendar/css/style.css b/apps/calendar/css/style.css
index e6d212ef5324d96dd86613fb959356ae84099305..0204f2fc12faa96274963a09d6455161881c9c8e 100644 (file)
--- a/apps/calendar/css/style.css
+++ b/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;
+}

diff --git a/apps/calendar/js/calendar.js b/apps/calendar/js/calendar.js
index bf9e2628ff942e4e0e61faa33d14bca40c96efe3..a29d667285802d80b1458b8bae2e53b88b11c952 100644 (file)
--- a/apps/calendar/js/calendar.js
+++ b/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(){