- Change all day event sorting so longer events are higher

- Change short event display so 1 line shows title, 2-4 lines show timespan & title
- Increase maximum number of events loaded at once

calendar/js/app.js

@@ -2713,7 +2713,7 @@ app.classes.calendar = AppJS.extend(
 		this.egw.dataFetch(
 			instance ? instance.etemplate_exec_id :
 				this.sidebox_et2.getInstanceManager().etemplate_exec_id,
-			{start: start, num_rows:200},
+			{start: start, num_rows:400},
 			query,
 			this.id,
 			function calendar_handleResponse(data) {

calendar/js/et2_widget_daycol.js

@@ -737,11 +737,15 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 		this._children.sort(function(a,b) {
 			var start = new Date(a.options.value.start) - new Date(b.options.value.start);
 			var end = new Date(a.options.value.end) - new Date(b.options.value.end);
-			
 			// Whole day events sorted by ID, normal events by start / end time
 			if(a.options.value.whole_day && b.options.value.whole_day)
 			{
-				return (a.options.value.app_id - b.options.value.app_id);
+				// Longer duration comes first so we have nicer bars across the top
+				var duration = 
+					(new Date(b.options.value.end) - new Date(b.options.value.start)) -
+					(new Date(a.options.value.end) - new Date(a.options.value.start));
+
+				return duration ? duration : (a.options.value.app_id - b.options.value.app_id);
 			}
 			else if (a.options.value.whole_day || b.options.value.whole_day)
 			{
@@ -890,7 +894,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 					columns[c][i].div.css('left', left.toFixed(1)+'%');
 					columns[c][i].div.css('right', right.toFixed(1)+'%');
 					columns[c][i].div.css('z-index',parseInt(20)+c);
-
+					columns[c][i]._small_size();
 				}
 			}
 			// Only wanted to position this event, leave the other columns alone

calendar/js/et2_widget_event.js

@@ -281,6 +281,7 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
 			.removeClass(function(index, css) {
 				return (css.match(/calendar_calEvent\S+/g) || []).join(' ');
 			})
+			.removeClass('calendar_calEventSmall')
 			.addClass(event.class)
 			.toggleClass('calendar_calEventPrivate', typeof event.private !== 'undefined' && event.private);
 		this.options.class = event.class;
@@ -304,16 +305,13 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
 		
 		// Header
 		var title = !event.is_private ? event['title'] : egw.lang('private');
-		// If there isn't enough height for header + 1 line in the body, it's small
-		var small_height = this.div.innerHeight() <= this.title.height() * 2;
-		if(!this.title.height())
-		{
-			// Handle sizing while hidden, such as when calendar is not the active tab
-			small_height = egw.getHiddenDimensions(this.div).h < egw.getHiddenDimensions(this.title).h * 2
-		}
 
-		this.div.attr('data-title', title);
+		// Height specific section
-		this.title.text(small_height ? title : this._get_timespan(event));
+		this._small_size();
+		
+		this.title
+			.html('<span class="calendar_calTimespan">'+this._get_timespan(event) + '<br /></span>')
+			.append('<span class="calendar_calEventTitle">'+title+'</span>')
 		
 		// Colors - don't make them transparent if there is no color
 		if(jQuery.Color("rgba(0,0,0,0)").toRgbaString() != jQuery.Color(this.div,'background-color').toRgbaString())
@@ -350,6 +348,31 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
 		}
 	},
 
+	/**
+	 * Calculate display variants for when event is too short for full display
+	 * 
+	 * Display is based on the number of visible lines, calculated off the header
+	 * height:
+	 * 1 - show just the event title, with ellipsis
+	 * 2 - Show timespan and title, with ellipsis
+	 * > 4 - Show description as well, truncated to fit
+	 */
+	_small_size: function() {
+		this.div.removeClass('calendar_calEventSmall');
+		if(this.options.value.whole_day_on_top) return;
+		var visible_lines = Math.floor(this.div.innerHeight() / this.title.height());
+
+		if(!this.title.height())
+		{
+			// Handle sizing while hidden, such as when calendar is not the active tab
+			visible_lines = Math.floor(egw.getHiddenDimensions(this.div).h / egw.getHiddenDimensions(this.title).h);
+		}
+
+		this.div.toggleClass('calendar_calEventSmall',visible_lines < 4);
+		this.div
+			.attr('data-visible_lines', visible_lines < 4 ? Math.max(1,visible_lines) : '');
+	},
+
 	/**
 	 * Examines the participants & returns CSS classname for status
 	 * 
@@ -424,7 +447,7 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
 			'</div>'+
 			'<div class="calendar_calEventBody">'+
 				'<p style="margin: 0px;">'+
-				'<span class="calendar_calEventTitle">'+this.div.attr('data-title')+'</span><br>'+
+				'<span class="calendar_calEventTitle">'+this.options.value.title+'</span><br>'+
 				this.options.value.description+'</p>'+
 				'<p style="margin: 2px 0px;">'+times+'</p>'+
 				(this.options.value.location ? '<p><span class="calendar_calEventLabel">'+this.egw().lang('Location') + '</span>:' + this.options.value.location+'</p>' : '')+

calendar/templates/default/app.css

@@ -619,6 +619,9 @@ Hide subsequent headers in week view with non-consolidated owners
  */
 	background-color: rgba(255,255,255,0.9);
 }
+.calendar_calEventHeader .calendar_calEventTitle {
+	display: none;
+}
 .calendar_calEventHeaderSmall{
 	font-size: 8pt;
 	line-height: 10pt;
@@ -665,6 +668,31 @@ Hide subsequent headers in week view with non-consolidated owners
 	font-weight: bold;
 }
 
+/* Event is too small for full display */
+.calendar_calTimeGrid:not(.calendar_calTimeGridList)
+.calendar_calEventSmall[data-visible_lines='1'] .calendar_calTimespan {
+	display: none;
+}
+.calendar_calTimeGrid:not(.calendar_calTimeGridList)
+.calendar_calEventSmall[data-visible_lines='2'] .calendar_calTimespan,
+.calendar_calTimeGrid:not(.calendar_calTimeGridList)
+.calendar_calEventSmall[data-visible_lines='3'] .calendar_calTimespan {
+	display: inline;
+}
+
+.calendar_calTimeGrid:not(.calendar_calTimeGridList)
+.calendar_calEventSmall[data-visible_lines='1'] .calendar_calEventTitle,
+.calendar_calTimeGrid:not(.calendar_calTimeGridList)
+.calendar_calEventSmall[data-visible_lines='2'] .calendar_calEventTitle,
+.calendar_calTimeGrid:not(.calendar_calTimeGridList)
+.calendar_calEventSmall[data-visible_lines='3'] .calendar_calEventTitle {
+	display: inline;
+}
+.calendar_calTimeGrid:not(.calendar_calTimeGridList)
+.calendar_calEventSmall .calendar_calEventBody {
+	padding-top: 2em;
+}
+
 /* Events as displayed in a list, not sized by time */
 .calendar_calTimeGridList .calendar_calTimeGridScroll {
 	overflow-y: hidden;

calendar/templates/pixelegg/app.css

@@ -618,6 +618,9 @@ Hide subsequent headers in week view with non-consolidated owners
  */
   background-color: rgba(255, 255, 255, 0.9);
 }
+.calendar_calEventHeader .calendar_calEventTitle {
+  display: none;
+}
 .calendar_calEventHeaderSmall {
   font-size: 8pt;
   line-height: 10pt;
@@ -663,6 +666,22 @@ Hide subsequent headers in week view with non-consolidated owners
 .calendar_calEventTitle {
   font-weight: bold;
 }
+/* Event is too small for full display */
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='1'] .calendar_calTimespan {
+  display: none;
+}
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='2'] .calendar_calTimespan,
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='3'] .calendar_calTimespan {
+  display: inline;
+}
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='1'] .calendar_calEventTitle,
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='2'] .calendar_calEventTitle,
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='3'] .calendar_calEventTitle {
+  display: inline;
+}
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall .calendar_calEventBody {
+  padding-top: 2em;
+}
 /* Events as displayed in a list, not sized by time */
 .calendar_calTimeGridList .calendar_calTimeGridScroll {
   overflow-y: hidden;