Event display:

- Always respect granularity in multiweek view, number of users selected doesn't matter
- Reduce multiweek options to 2 or 3
- Fix start of day positioning when there are several all day non-blocking events
- Try to work with CSS transitions and sizes a little better

calendar/inc/class.calendar_hooks.inc.php

@@ -162,7 +162,7 @@ class calendar_hooks
 			$times[$i] = $GLOBALS['egw']->common->formattime($i,'00');
 		}
 
-		for ($i = 2; $i <= 9; ++$i)
+		for ($i = 2; $i <= 3; ++$i)
 		{
 			$muliple_weeks[$i.' weeks'] = lang('%1 weeks',$i);
 		}

calendar/js/app.js

@@ -520,6 +520,7 @@ app.classes.calendar = AppJS.extend(
 				original.css("height",original.height() + "px");
 				cloned.css("height",original.height() + "px");
 			}
+			var original_size = {height: wrapper.parent().css('height'), width: wrapper.parent().css('width')};
 			wrapper.parent().css({overflow:'hidden', height:original.outerHeight()+"px", width:original.outerWidth() + "px"});
 			wrapper.height(direction == "up" || direction == "down" ? 2 * original.outerHeight()  : original.outerHeight());
 			wrapper.width(direction == "left" || direction == "right" ? 2 * original.outerWidth() : original.outerWidth());
@@ -579,7 +580,7 @@ app.classes.calendar = AppJS.extend(
 					wrapper
 						.removeClass("calendar_slide")
 						.css({"transform": '',height: '', width:'',overflow:''});
-					wrapper.parent().css({overflow: '', width: '', height: ''});
+					wrapper.parent().css({overflow: '', width: original_size.width, height: original_size.height});
 					original.css("display","");
 					wrapper[0].offsetHeight;
 					wrapper.css({
@@ -3053,7 +3054,8 @@ jQuery.extend(app.classes.calendar,{
 				return d;
 			},
 			granularity: function(state) {
-				return  (parseInt(egw.preference('multiple_weeks','calendar')) || 3) * app.calendar.View.granularity.call(this, state);
+				// Does not care how many users you select
+				return parseInt(egw.preference('interval','calendar')) || 30;
 			}
 		}),
 		month: app.classes.calendar.prototype.View.extend({

calendar/js/et2_widget_daycol.js

@@ -674,13 +674,21 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM],
 				var height = 0;
 				if(columns[c][i].options.value.whole_day_on_top)
 				{
-					columns[c][i].div
-						.appendTo(this.all_day);
+					if(!this.all_day.has(columns[c][i].div).length)
+					{
+						columns[c][i].div
+							.appendTo(this.all_day);
+						this._parent._resizeTimes();
+					}
 					continue;
 				}
 				else
 				{
-					columns[c][i].div.appendTo(this.div);
+					if(this.all_day.has(columns[c][i].div).length)
+					{
+						columns[c][i].div.appendTo(this.div);
+						this._parent._resizeTimes();
+					}
 					top = this._time_to_position(columns[c][i].options.value.start_m,whole_day_counter);
 					height = this._time_to_position(columns[c][i].options.value.end_m,whole_day_counter)-top;
 				}

calendar/js/et2_widget_event.js

@@ -131,8 +131,8 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
 				this._actionObject = null;
 
 				// Update daywise caches
-				var new_cache_id = app.classes.calendar._daywise_cache_id(event.date,this.options.owner);
-				var old_cache_id = app.classes.calendar._daywise_cache_id(this.options.value.date,this.options.owner);
+				var new_cache_id = app.classes.calendar._daywise_cache_id(event.date,this._parent.options.owner);
+				var old_cache_id = app.classes.calendar._daywise_cache_id(this.options.value.date,this._parent.options.owner);
 				var new_daywise = egw.dataGetUIDdata(new_cache_id);
 				var old_daywise = egw.dataGetUIDdata(old_cache_id);
 				new_daywise = new_daywise ? new_daywise.data : [];

calendar/js/et2_widget_timegrid.js

@@ -103,7 +103,7 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 
 		// Headers
 		this.gridHeader = $j(document.createElement("div"))
-			.addClass("calendar_calGridHeader et2_link")
+			.addClass("calendar_calGridHeader")
 			.appendTo(this.div);
 		this.dayHeader = $j(document.createElement("div"))
 			.appendTo(this.gridHeader);
@@ -482,6 +482,7 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 				}
 				
 				this.widget._drawDays();
+				this.widget._resizeTimes();
 				if(this.trigger)
 				{
 					this.widget.change();
@@ -557,7 +558,7 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 		var wd_end = 60*this.options.day_end;
 		var granularity = this.options.granularity;
 		var totalDisplayMinutes	= wd_end - wd_start;
-		var rowsToDisplay	= (totalDisplayMinutes + 60)/granularity;
+		var rowsToDisplay	= Math.ceil((totalDisplayMinutes+60)/granularity);
 		
 		this.gridHeader
 			.empty()
@@ -569,10 +570,10 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 			.appendTo(this.div);
 
 		// Max with 45 avoids problems when it's not shown
-		var header_height = Math.max(this.gridHeader.height(), 45);
+		var header_height = Math.max(this.gridHeader.outerHeight(true), 45);
 		
 		this.scrolling
-			.css('height', (this.options.height - header_height)+'px')
+			.css('height', (this.div.innerHeight() - header_height)+'px')
 			.appendTo(this.div)
 			.empty()
 			.off().on('scroll', jQuery.proxy(this._scroll, this));
@@ -580,7 +581,7 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 		// Percent
 		var rowHeight = (100/rowsToDisplay).toFixed(1);
 		// Pixels
-		this.rowHeight = this.div.height() / rowsToDisplay;
+		this.rowHeight = this.scrolling.height() / rowsToDisplay;
 
 		// the hour rows
 		var show = {
@@ -616,13 +617,35 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 
 		// Set heights in pixels for scrolling
 		this.scrolling
-			.append('<div class="calendar_calTimeLabels" style="height: ' +(this.rowHeight*i)+'px" >' + html + '</div>');
+			.append('<div class="calendar_calTimeLabels">' + html + '</div>');
 		this.days.css('height', (this.rowHeight*i)+'px');
 
 		// Scroll to start of day
 		this.scrolling.scrollTop(this._top_time);
 	},
 
+	_resizeTimes: function() {
+
+		var wd_start = 60*this.options.day_start;
+		var wd_end = 60*this.options.day_end;
+		var totalDisplayMinutes	= wd_end - wd_start;
+		var rowsToDisplay	= Math.ceil((totalDisplayMinutes+60)/this.options.granularity);
+		this.scrolling
+			.css('height', (this.options.height - this.gridHeader.outerHeight(true))+'px');
+
+		var new_height = this.scrolling.height() / rowsToDisplay;
+		if(new_height != this.rowHeight)
+		{
+			this.rowHeight = new_height;
+			var rows = $j('.calendar_calTimeRow',this.scrolling).height(this.rowHeight);
+			this.days.css('height', (this.rowHeight*rows.length)+'px');
+			
+			// Scroll to start of day
+			this._top_time = (wd_start * this.rowHeight) / this.options.granularity;
+			this.scrolling.scrollTop(this._top_time);
+		}
+	},
+
 	/**
 	 * Set up the needed day widgets to correctly display the selected date
 	 * range.  First we calculate the needed dates, then we create any needed
@@ -713,8 +736,8 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 		// Don't hold on to value any longer, use the data cache for best info
 		this.value = {};
 		
-		// Scroll to start of day
-		this.scrolling.scrollTop(this._top_time);
+		// Adjust and scroll to start of day
+		this._resizeTimes();
 
 		// Handle not fully visible elements
 		this._scroll();
@@ -1507,7 +1530,7 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 			this.div.css('height', this.options.height);
 			
 			// Re-do time grid
-			this._drawGrid()
+			this._drawGrid();
 		}
 	}
 });

calendar/templates/default/app.css

@@ -151,9 +151,9 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
     -ms-user-select: none;
     user-select: none;
 	overflow: hidden;
-/* set via inline style on runtime:
- *  height:
- */
+
+	display: flex;
+	flex-direction: column;
 }
 
 .calendar_calTimeGrid .calendar_calTimeGridScroll {
@@ -233,7 +233,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	line-height: 16px;
 }
 .calendar_calDayColHeader {
-	display: inline-block;
+	display: table-cell;
 	position: relative;
 	vertical-align: top;
 	border-right: 1px solid silver;
@@ -289,8 +289,15 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 .calendar_calDayColAllDay {
 	display: flex;
 	flex-wrap: wrap;
+	flex-direction: row;
+	align-items:flex-start;
 	width: 100%;
-	height: 100%
+	height: 100%;
+	min-height: 3em;
+}
+
+.calendar_calDayColAllDay > .calendar_calEventBodySmall {
+	white-space: nowrap;
 }
 .calendar_calGridHeader > div {
 	position: relative;
@@ -360,6 +367,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	z-index: 29;
 	border-bottom: 1px solid silver;
 	min-height: 45px;
+	flex: 0 0 auto;
 }
 #calendar-view_view tbody.ui-sortable {
 	cursor: default;
@@ -464,6 +472,9 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	/* This determines how many per line */
 	flex: 1 1 20em;
 }
+.calendar_calDayColHeader .calendar_calEvent .calendar_calEventBody {
+	white-space: nowrap;
+}
 .calendar_calEventTooltip{
 	border-radius: 6px;
 	-moz-border-radius: 6px;
@@ -496,6 +507,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	right: 0px;
 	padding-left: 2px;
 	min-height: 1em;
+	overflow: hidden;
 /* set via inline style on runtime
  *  background-color: depending on category
  *	color: white || black depending on cat;