Calendar W.I.P

- Change layout to show the whole 24 hour day with a scrollbar, not just work day - Fix some translation issues (thanks Ulle) by using calendar's egw for lang calls - Fix cache is discarded even when state doesn't change, which broke filtering (thanks Ulle)
2015-10-05 23:45:51 +00:00 · 2015-10-05 23:45:51 +00:00 · a384714a8d
commit a384714a8d
parent d8487a7507
8 changed files with 210 additions and 942 deletions
--- a/calendar/inc/class.calendar_ui.inc.php
+++ b/calendar/inc/class.calendar_ui.inc.php
@ -317,7 +317,11 @@ class calendar_ui
 					else	// change only the owners of the given type
 					{
 						$res_type = is_numeric($set_owners[0]) ? false : $set_owners[0][0];
-						$owners = explode(',',$states['owner'] ? $states['owner'] : $default);
+						$owners = $states['owner'] ? $states['owner'] : $default;
+						if(!is_array($owners))
+						{
+							$owners = explode(',',$owners);
+						}
 						foreach($owners as $key => $owner)
 						{
 							if (!$res_type && is_numeric($owner) || $res_type && $owner[0] == $res_type)
--- a/calendar/js/app.js
+++ b/calendar/js/app.js
@ -1304,19 +1304,20 @@ app.classes.calendar = AppJS.extend(
 		{
 			for(var s in _set)
 			{
-				if(cachable_changes.indexOf(s) === -1)
-				{
-					// Expire daywise cache
-					var daywise = egw.dataKnownUIDs(app.classes.calendar.DAYWISE_CACHE_ID);
-					for(var i = 0; i < daywise.length; i++)
-					{
-						egw.dataDeleteUID(app.classes.calendar.DAYWISE_CACHE_ID + '::' + daywise[i]);
-					}
-				}
 				if (new_state[s] !== _set[s])
 				{
 					changed.push(s + ': ' + new_state[s] + ' -> ' + _set[s]);
 					new_state[s] = _set[s];
+					
+					if(cachable_changes.indexOf(s) === -1)
+					{
+						// Expire daywise cache
+						var daywise = egw.dataKnownUIDs(app.classes.calendar.DAYWISE_CACHE_ID);
+						for(var i = 0; i < daywise.length; i++)
+						{
+							egw.dataDeleteUID(app.classes.calendar.DAYWISE_CACHE_ID + '::' + daywise[i]);
+						}
+					}
 				}
 			}
 		}
@ -2599,7 +2600,7 @@ jQuery.extend(app.classes.calendar,{
 	views: {
 		day: app.classes.calendar.prototype.View.extend({
 			header: function(state) {
-				return egw.lang('Day view') + ': ' + app.calendar.View.header.call(this, state);
+				return app.calendar.egw.lang('Dayview') + ': ' + app.calendar.View.header.call(this, state);
 			},
 			etemplates: ['calendar.view','calendar.todo'],
 			start_date: function(state) {
@ -2621,7 +2622,7 @@ jQuery.extend(app.classes.calendar,{
 		}),
 		day4: app.classes.calendar.prototype.View.extend({
 			header: function(state) {
-				return egw.lang('Four days view') + ': ' + app.calendar.View.header.call(this, state);
+				return app.calendar.egw.lang('Four days view') + ': ' + app.calendar.View.header.call(this, state);
 			},
 			end_date: function(state) {
 				var d = app.calendar.View.end_date.call(this,state);
@ -2645,7 +2646,7 @@ jQuery.extend(app.classes.calendar,{
 		week: app.classes.calendar.prototype.View.extend({
 			header: function(state) {
 				var formatDate = new Date(state.first);
-				return egw.lang('Week view') + ': ' + egw.lang('Week') + ' ' +
+				return app.calendar.egw.lang('Weekview') + ': ' + app.calendar.egw.lang('Week') + ' ' +
 					app.calendar.date.week_number(state.first) + ': ' +
 					app.calendar.date.long_date(state.first, state.last)
 			},
@ -2669,7 +2670,7 @@ jQuery.extend(app.classes.calendar,{
 		}),
 		weekN: app.classes.calendar.prototype.View.extend({
 			header: function(state) {
-				return egw.lang('Week') + ' ' +
+				return app.calendar.egw.lang('Week') + ' ' +
 					app.calendar.date.week_number(state.first) + ' - ' +
 					app.calendar.date.week_number(state.last) + ': ' +
 					app.calendar.date.long_date(state.first, state.last)
@ -2694,7 +2695,7 @@ jQuery.extend(app.classes.calendar,{
 			{
 				var formatDate = new Date(state.date);
 				formatDate = new Date(formatDate.valueOf() + formatDate.getTimezoneOffset() * 60 * 1000);
-				return egw.lang('Month view') + ':' + egw.lang(date('F',formatDate)) + ' ' + date('Y',formatDate);
+				return app.calendar.egw.lang('Monthview') + ':' + app.calendar.egw.lang(date('F',formatDate)) + ' ' + date('Y',formatDate);
 			},
 			start_date: function(state) {
 				var d = app.calendar.View.start_date.call(this,state);
@ -2732,7 +2733,8 @@ jQuery.extend(app.classes.calendar,{

 				var endDate = new Date(state.last);
 				endDate = new Date(endDate.valueOf() + endDate.getTimezoneOffset() * 60 * 1000);
-				return egw.lang('Planner view') + ': ' + date(egw.preference('dateformat'),startDate) +
+				var title = state.sortby == 'user' ? 'planner by user' : state.sortby=='month' ? 'yearly planner' : 'planner by category';
+				return app.calendar.egw.lang(title) + ': ' + date(egw.preference('dateformat'),startDate) +
 					(startDate == endDate ? '' : ' - ' + date(egw.preference('dateformat'),endDate));
 			},
 			etemplates: ['calendar.planner'],
@ -2820,7 +2822,7 @@ jQuery.extend(app.classes.calendar,{
 		}),

 		listview: app.classes.calendar.prototype.View.extend({
-			header: function() {return egw.lang('List view');},
+			header: function() {return app.calendar.egw.lang('Listview');},
 			etemplates: ['calendar.list']
 		})
 	}}
--- a/calendar/js/et2_widget_daycol.js
+++ b/calendar/js/et2_widget_daycol.js
@ -65,8 +65,11 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 		this.div = $j(document.createElement("div"))
 			.addClass("calendar_calDayCol")
 			.css('width',this.options.width);
-		this.title = $j(document.createElement('div'))
+		this.header = $j(document.createElement('div'))
+			.addClass("calendar_calDayColHeader")
 			.appendTo(this.div);
+		this.title = $j(document.createElement('div'))
+			.appendTo(this.header);

 		this.setDOMNode(this.div[0]);

@ -80,7 +83,6 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 			wd_start:	60*9,
 			wd_end:		60*17,
 			granularity:	30,
-			extraRows:	2,
 			rowsToDisplay:	10,
 			rowHeight:	20,
 			// Percentage; not yet available
@ -105,8 +107,10 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 	destroy: function() {
 		this._super.apply(this, arguments);
 		this.div.off();
+		this.header.off().remove();
 		this.title.off();
 		this.div = null;
+		this.header = null;
 		this.title = null;
 		
 		// date_helper has no parent, so we must explicitly remove it
@ -129,15 +133,16 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 			this.display_settings.wd_start = 60*this._parent.options.day_start;
 			this.display_settings.wd_end = 60*this._parent.options.day_end;
 			this.display_settings.granularity = this._parent.options.granularity;
-			this.display_settings.extraRows = this._parent.options.extra_rows;
+			this._parent.dayHeader.append(this.header);
 		}

-		this.display_settings.rowsToDisplay	= ((this.display_settings.wd_end - this.display_settings.wd_start)/this.display_settings.granularity)+2+2*this.display_settings.extraRows;
+		this.header.css('left', this.div.css('left'));
+		this.display_settings.rowsToDisplay	= ((this.display_settings.wd_end - this.display_settings.wd_start)/this.display_settings.granularity);
 		this.display_settings.rowHeight= (100/this.display_settings.rowsToDisplay).toFixed(1);
 		this.display_settings.titleHeight = (this.title.height()/this.div.height())*100;

 		// adding divs to click on for each row / time-span
-		for(var t =this.display_settings.wd_start,i = 1+this.display_settings.extraRows; t <= this.display_settings.wd_end; t += this.display_settings.granularity,++i)
+		for(var t = 0,i = 1; t < 1440; t += this.display_settings.granularity,++i)
 		{
 			var linkData = {
 				'menuaction':'calendar.calendar_uiforms.edit',
@ -150,7 +155,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 			var droppableDateTime = linkData['date'] + "T" + linkData['hour'] + linkData['minute'];
 			var droppableID='drop_'+droppableDateTime+'_O'+(this.options.owner<0?'group'+Math.abs(this.options.owner):this.options.owner);

-			var hour = jQuery('<div id="' + droppableID + '" style="height:'+ this.display_settings.rowHeight +'%; top: '+ (i*this.display_settings.rowHeight).toFixed(1) +'%;" class="calendar_calAddEvent">')
+			var hour = jQuery('<div id="' + droppableID + '" style="height:'+ this._parent.rowHeight+'px; " class="calendar_calAddEvent">')
 				.attr('data-date',linkData.date)
 				.attr('data-hour',linkData.hour)
 				.attr('data-minute',linkData.minute)
@ -206,7 +211,8 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 		var date_string = this._parent._children.length === 1 ?
 			app.calendar.date.long_date(formatDate,false, false, true) :
 			jQuery.datepicker.formatDate('DD dd',formatDate);
-		this.title.text(date_string);
+		this.title.text(date_string)
+			.attr("data-date", new_date);

 		// Avoid redrawing if date is the same
 		if(new_date === this.options.date && !force_redraw)
@ -221,8 +227,6 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea

 		this.options.date = new_date;

-		this.div.attr("data-date", this.options.date);
-
 		// Set holiday and today classes
 		this.day_class_holiday();

@ -290,6 +294,15 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 		},this,this.getInstanceManager().execId,this.id);
 	},

+	set_left: function(left) {
+		this.div.css('left',left);
+		this.header.css('left',left);
+	},
+	set_width: function(width) {
+		this._super.apply(this, arguments);
+		this.header.width(width);
+	},
+
 	/**
 	 * Applies class for today, and any holidays for current day
 	 */
@ -297,12 +310,13 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 		// Remove all classes
 		this.title.removeClass()
 			// Except this one...
-			.addClass("et2_clickable calendar_calDayColHeader et2_link");
+			.addClass("et2_clickable et2_link");
+		this.header.removeClass('calendar_calBirthday calendar_calHoliday');

 		// Set today class - note +1 when dealing with today, as months in JS are 0-11
 		var today = new Date();
 		
-		this.title.toggleClass("calendar_calToday", this.options.date === ''+today.getUTCFullYear()+
+		this.header.toggleClass("calendar_calToday", this.options.date === ''+today.getUTCFullYear()+
 			sprintf("%02d",today.getUTCMonth()+1)+
 			sprintf("%02d",today.getUTCDate())
 		);
@ -317,7 +331,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 			{
 				if (typeof holidays[i]['birthyear'] !== 'undefined')
 				{
-					this.title.addClass('calendar_calBirthday');
+					this.header.addClass('calendar_calBirthday');

 					//If the birthdays are already displayed as event, don't
 					//show them in the caption
@ -328,8 +342,8 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 				}
 				else
 				{
-					this.title.addClass('calendar_calHoliday');
-					this.title.attr('data-holiday', holidays[i]['name']);
+					this.header.addClass('calendar_calHoliday');
+					this.header.attr('data-holiday', holidays[i]['name']);

 					//If the birthdays are already displayed as event, don't
 					//show them in the caption
@ -340,7 +354,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 				}
 			}
 		}
-		this.title.attr('title', holiday_list.join(','));
+		this.header.attr('title', holiday_list.join(','));
 	},

 	/**
@ -509,8 +523,10 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 				var height = 0;
 				if(columns[c][i].options.value.whole_day_on_top)
 				{
-					top = this.display_settings.titleHeight + this.display_settings.rowHeight*whole_day_counter++;
-					height = this.display_settings.rowHeight;
+					columns[c][i].div
+						.appendTo(this.header)
+						.css('position', 'relative');
+					continue;
 				}
 				else
 				{
@ -539,7 +555,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 	/**
 	 * Calculates the vertical position based on the time
 	 *
-	 * workday start- and end-time, is taken into account, as well as timeGrids px_m - minutes per pixel param
+	 * This calculation is a percentage from 00:00 to 23:59
 	 *
 	 * @param {int} time in minutes from midnight
 	 * @param {int} [row_offset=0] Add extra spacing for additional rows
@ -553,21 +569,9 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 			row_offset = 0;
 		}
 		
-		// time before workday => condensed in the first $this->extraRows rows
-		if (this.display_settings.wd_start > 0 && time < this.display_settings.wd_start)
-		{
-			pos = this.display_settings.titleHeight + (row_offset + (time / this.display_settings.wd_start )) * this.display_settings.rowHeight;
-		}
-		// time after workday => condensed in the last row
-		else if (this.display_settings.wd_end < 24*60 && time > this.display_settings.wd_end+1*this.display_settings.granularity)
-		{
-			pos = 100 - (row_offset * this.display_settings.rowHeight * (1 - (time - this.display_settings.wd_end) / (24*60 - this.display_settings.wd_end)));
-		}
-		// time during the workday => 2. row on (= + granularity)
-		else
-		{
-			pos = this.display_settings.rowHeight * (1+this.display_settings.extraRows+(time-this.display_settings.wd_start)/this.display_settings.granularity);
-		}
+		// 24h
+		pos = ((time / 60) / 24) * 100
+		
 		pos = pos.toFixed(1)

 		return pos;
@ -600,9 +604,10 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 	 * @param {Event} _ev
 	 * @returns {boolean}
 	 */
-	click: function(_ev) {
-		
-		if($j(_ev.target).hasClass('calendar_calDayColHeader'))
+	click: function(_ev)
+	{
+		// Click on the title
+		if(this.title.is(_ev.target))
 		{
 			this._parent.set_start_date(this.date);
 			this._parent.set_end_date(this.date);
--- a/calendar/js/et2_widget_planner.js
+++ b/calendar/js/et2_widget_planner.js
@ -418,7 +418,7 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
 				for(var i = 0; i < 12; i++)
 				{
 					// Not using UTC because we corrected for timezone offset
-					labels.push({id: d.getFullYear() +'-'+d.getMonth(), label:egw.lang(date('F',d))+' '+d.getFullYear()});
+					labels.push({id: d.getFullYear() +'-'+d.getMonth(), label:app.calendar.egw.lang(date('F',d))+' '+d.getFullYear()});
 					d.setMonth(d.getMonth()+1);
 				}
 				return labels;
@ -461,6 +461,10 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
 						if(labels[i].id == key)
 						{
 							label_index = i;
+							if(typeof rows[label_index] === 'undefined')
+							{
+								rows[label_index] = [];
+							}
 							break;
 						}
 					}
@ -725,8 +729,8 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
 		var end = new Date(this.options.end_date);
 		end = new Date(end.valueOf() + end.getTimezoneOffset() * 60 * 1000);

-		var title = egw.lang(date('F',start))+' '+date('Y',start)+' - '+
-			egw.lang(date('F',end))+' '+date('Y',end);
+		var title = app.calendar.egw.lang(date('F',start))+' '+date('Y',start)+' - '+
+			app.calendar.egw.lang(date('F',end))+' '+date('Y',end);

 		// calculate date for navigation links
 		var time = new Date(start);
@ -790,7 +794,7 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
 			}
 			if (days_in_month > 5)
 			{
-				var title = egw.lang(date('F',new Date(t.valueOf() + t.getTimezoneOffset() * 60 * 1000)))
+				var title = app.calendar.egw.lang(date('F',new Date(t.valueOf() + t.getTimezoneOffset() * 60 * 1000)))
 			}
 			if (days_in_month > 10)
 			{
@ -857,7 +861,7 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
 		var t = new Date(start);
 		for(var left = 0,i = 0; i < days; t.setUTCDate(t.getUTCDate() + 7),left += week_width,i += 7)
 		{
-			var title = egw.lang('Week')+' '+app.calendar.date.week_number(t);
+			var title = app.calendar.egw.lang('Week')+' '+app.calendar.date.week_number(t);

 			state = new Date(t.valueOf() - start.getTimezoneOffset() * 60 * 1000).toJSON();
 			if (days  <= 7)
@ -907,15 +911,15 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize

 			if (days <= 3)
 			{
-				title = egw.lang(date('l',t))+', '+date('j',t)+'. '+egw.lang(date('F',t));
+				title = app.calendar.egw.lang(date('l',t))+', '+date('j',t)+'. '+app.calendar.egw.lang(date('F',t));
 			}
 			else if (days <= 7)
 			{
-				title = egw.lang(date('l',t))+' '+date('j',t);
+				title = app.calendar.egw.lang(date('l',t))+' '+date('j',t);
 			}
 			else
 			{
-				title = egw.lang(date('D',t)).substr(0,2)+'<br />'+date('j',t);
+				title = app.calendar.egw.lang(date('D',t)).substr(0,2)+'<br />'+date('j',t);
 			}
 			state = new Date(t.valueOf() - start.getTimezoneOffset() * 60 * 1000).toJSON();
 			if (days < 5)
--- a/calendar/js/et2_widget_timegrid.js
+++ b/calendar/js/et2_widget_timegrid.js
@ -65,12 +65,6 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 			default: parseInt(egw.preference('interval','calendar')) || 30,
 			description: "How many minutes per row"
 		},
-		extra_rows: {
-			name: "Extra rows",
-			type: "integer",
-			default: 2,
-			description: "Extra rows above and below the workday"
-		},
 		owner: {
 			name: "Owner",
 			type: "any", // Integer, or array of integers
@ -107,15 +101,22 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 			.addClass("calendar_calTimeGrid")
 			.addClass("calendar_TimeGridNoLabel");

-		// Contains times / rows
+		// Headers
 		this.gridHeader = $j(document.createElement("div"))
 			.addClass("calendar_calGridHeader et2_link")
 			.appendTo(this.div);
+		this.dayHeader = $j(document.createElement("div"))
+			.appendTo(this.gridHeader);
 		
+		// Contains times / rows
+		this.scrolling = $j(document.createElement('div'))
+			.addClass("calendar_calTimeGridScroll")
+			.appendTo(this.div);
+
 		// Contains days / columns
 		this.days = $j(document.createElement("div"))
 			.addClass("calendar_calDayCols")
-			.appendTo(this.div);
+			.appendTo(this.scrolling);

 		// Used for its date calculations
 		this.date_helper = et2_createWidget('date',{},null);
@ -157,7 +158,9 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 		this.div.off();
 		this.div = null;
 		this.gridHeader = null;
+		this.dayHeader = null;
 		this.days = null;
+		this.scrolling = null;
 		this._labelContainer = null;

 		// date_helper has no parent, so we must explicitly remove it
@ -173,6 +176,10 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz

 	doLoadingFinished: function() {
 		this._super.apply(this, arguments);
+		
+		// Need to get the correct internal sizing
+		this.resize();
+
 		this._drawGrid();

 		// Actions may be set on a parent, so we need to explicitly get in here
@ -198,7 +205,8 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 			$j(this).resizable
 			({
 				distance: 10,
-				grid: [10000,10],
+				// Grid matching preference
+				grid: [10000,timegrid.rowHeight],
 				autoHide: false,
 				handles: 's,se',
 				containment:'parent',
@ -252,6 +260,7 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 					{
 						event_widget._parent.position_event(event_widget);
 					}
+					timegrid.div.children('.drop-hover').removeClass('.drop-hover');
 				},

 				/**
@ -263,7 +272,11 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 				resize:function(event, ui)
 				{
 					// Add 5px to make sure it doesn't land right on the edge of a div
-					timegrid._drag_helper(this,ui.element[0],ui.helper.outerHeight()+5);
+					var drop = timegrid._drag_helper(this,ui.element[0],ui.helper.outerHeight()+5);
+					if(drop && !drop.is(':visible'))
+					{
+						drop.get(0).scrollIntoView(false);
+					}
 				}	 
 			});
 		});
@ -294,6 +307,17 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 		if (typeof element.dropEnd != 'undefined' && element.dropEnd.length)
 		{
 			element.dropEnd.addClass("drop-hover");
+
+			// Make sure the target is visible in the scrollable day
+			var scrollto = element.dropEnd.next() ? element.dropEnd.next() : element.dropEnd;
+			if(this.scrolling.height() + this.scrolling.scrollTop() < scrollto[0].offsetTop+scrollto.height() )
+			{
+				scrollto.get(0).scrollIntoView(false);
+			}
+			else if(element.dropEnd[0].offsetTop < this.scrolling[0].scrollTop)
+			{
+				element.dropEnd.get(0).scrollIntoView(true);
+			}
 			var time = jQuery.datepicker.formatTime(
 				egw.preference("timeformat") == 12 ? "h:mmtt" : "HH:mm",
 				{
@ -463,7 +487,6 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 		this._drawTimes();

 		// Draw in the vertical - the days
-		this.div.append(this.days);
 		this.invalidate();
 	},

@ -478,24 +501,28 @@ 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/granularity)+2+2*this.options.extra_rows;
+		var rowsToDisplay	= (totalDisplayMinutes/granularity);
+		// Percent
 		var rowHeight = (100/rowsToDisplay).toFixed(1);
+		// Pixels
 		this.rowHeight = this.div.height() / rowsToDisplay;

-		// ensure a minimum height of each row
-		if (this.options.height < (rowsToDisplay+1) * 12)
-		{
-			this.options.height = (rowsToDisplay+1) * 12;
-		}
-
 		this.gridHeader
-			.css('height', rowHeight+'%')
-			.text(this.options.label)
+			.empty()
+			.css('height', this.rowHeight+'px')
 			.attr('data-date', this.options.start_date)
 			.attr('data-owner', this.options.owner)
+			.append(this.options.label)
 			.append(this.owner.getDOMNode())
+			.append(this.dayHeader)
 			.appendTo(this.div);

+		this.scrolling
+			.css('top', this.rowHeight+'px')
+			.css('height', (this.options.height - this.rowHeight)+'px')
+			.appendTo(this.div)
+			.empty();
+
 		// the hour rows
 		var show = {
 			5  : [0,15,30,45],
@ -504,9 +531,10 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 			45 : [0,15,30,45]
 		};
 		var html = '';
-		for(var t = wd_start,i = 1+this.options.extra_rows; t <= wd_end; t += granularity,++i)
+		this._top_time = 0
+		for(var t = 0,i = 0; t < 1440; t += granularity,++i)
 		{
-			html += '<div class="calendar_calTimeRow" style="height: '+rowHeight+'%; top:'+ (i*rowHeight).toFixed(1) +'%;">';
+			html += '<div class="calendar_calTimeRow" style="height: '+this.rowHeight+'px;">';
 			// show time for full hours, always for 45min interval and at least on every 3 row
 			var time = jQuery.datepicker.formatTime(
 					egw.preference("timeformat") == 12 ? "h:mmtt" : "HH:mm",
@ -518,11 +546,22 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 					},
 					{"ampm": (egw.preference("timeformat") == "12")}
 				);
+			if(t <= wd_start && t + granularity > wd_start)
+			{
+				this._top_time = this.rowHeight * (i+1+(wd_start - (t+granularity))/granularity)
+			}

 			var time_label = (typeof show[granularity] === 'undefined' ? t % 60 === 0 : show[granularity].indexOf(t % 60) !== -1) ? time : '';
 			html += '<div class="calendar_calTimeRowTime et2_clickable" data-time="'+time.trim()+'" data-hour="'+Math.floor(t/60)+'" data-minute="'+(t%60)+'">'+time_label+"</div></div>\n";
 		}
-		this.div.append(html);
+
+		// Set heights in pixels for scrolling
+		this.scrolling
+			.append('<div class="calendar_calTimeLabels" style="height: ' +(this.rowHeight*i)+'px" >' + html + '</div>');
+		this.days.css('height', (this.rowHeight*i)+'px');
+
+		// Scroll to start of day
+		this.scrolling.scrollTop(this._top_time);
 	},

 	/**
@ -531,6 +570,8 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 	 * widgets.  Existing widgets are recycled rather than discarded.
 	 */
 	_drawDays: function() {
+		this.scrolling.append(this.days);
+		
 		// If day list is still empty, recalculate it from start & end date
 		if(this.day_list.length === 0)
 		{
@ -568,37 +609,22 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 		for(var i = 0; i < this.day_list.length; i++)
 		{
 			day = this.day_widgets[i];
-			// Set the date, and pass any data we have
-			/* Not needed due to registered callbacks (?)
-			if(typeof this.value[this.day_list[i]] === 'undefined')
-			{
-				var ids = (egw.dataGetUIDdata(app.classes.calendar._daywise_cache_id(this.day_list[i],this.options.owner))||{data:[]});
-				if(ids.data.length > 0)
-				{
-					this.value[this.day_list[i]] = [];
-				}
-				for(var j = 0; j < ids.data.length; j++)
-				{
-					if(egw.dataHasUID('calendar::'+ids.data[j]))
-					{
-						this.value[this.day_list[i]].push(egw.dataGetUIDdata('calendar::'+ids.data[j]).data);
-					}
-				}
-			}
-			*/
-
+			
+			// Position
+			day.set_left(((100/this.day_list.length).toFixed(2) * i) + '%');
+			
 			day.set_date(this.day_list[i], this.value[this.day_list[i]] || false);
 			day.set_owner(this.options.owner);
 			day.set_id(this.day_list[i]);
 			day.set_width((100/this.day_list.length).toFixed(2) + '%');
-
-			// Position
-			$j(day.getDOMNode()).css('left', ((100/this.day_list.length).toFixed(2) * i) + '%');
 		}

 		// 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);
+		
 		// TODO: Figure out how to do this with detached nodes
 		/*
 		var nodes = this.day_col.getDetachedNodes();
@ -1089,7 +1115,10 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 	set_label: function(label)
 	{
 		this.options.label = label;
-		this.gridHeader.text(label);
+		this.gridHeader.contents().filter(function() {
+			return (this.nodeType == 3);
+		}).remove();
+		this.gridHeader.append(label);

 		// If it's a short label (eg week number), don't give it an extra line
 		// but is empty, but give extra space for a single owner name
@ -1203,7 +1232,7 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 		var result = true;
 		
 		// Is this click in the event stuff, or in the header?
-		if(this.days.has(_ev.target).length)
+		if($j(_ev.target).hasClass('.calendar_calEvent') || $j(_ev.target).parents('.calendar_calEvent').length)
 		{
 			// Event came from inside, maybe a calendar event
 			var event = this._get_event_info(_ev.originalEvent.target);
@ -1228,6 +1257,18 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 		{
 			app.calendar.update_state(jQuery.extend({view: 'week'},_ev.target.dataset));
 		}
+		else if (this.dayHeader.has(_ev.target).length)
+		{
+			// Click on a day header - let day deal with it
+			// First child is a selectAccount
+			for(var i = 1; i < this._children.length; i++)
+			{
+				if(this._children[i].header && this._children[i].header.has(_ev.target).length)
+				{
+					return this._children[i].click(_ev);
+				}
+			}
+		}
 		else if (_ev.target.dataset.date)
 		{
 			// Default handler to open a new event at the selected time
@ -1304,10 +1345,31 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 	},

 	// Resizable interface
-	resize: function (_height)
+	resize: function ()
 	{
-		this.options.height = _height;
-		this.div.css('height', this.options.height);
+		// We expect the timegrid to be in a table with 0 or more other timegrids,
+		// 1 per row.  We want each timegrid to be as large as possible, but space
+		// shared equally.  Height can't be set to a percentage on the rows, because
+		// that doesn't work.
+
+		// Find the table
+		var table = this.div.parentsUntil('table').parent();
+
+		// How many rows?
+		var rowCount = table.children('tr').length;
+
+		// Take the whole tab height
+		this.options.height = Math.floor(Math.min($j(this.getInstanceManager().DOMContainer).height(),$j(this.getInstanceManager().DOMContainer).parent().innerHeight()) / rowCount);
+		this.options.height = Math.floor((egw.getHiddenDimensions(this.getInstanceManager().DOMContainer).h ) / rowCount);
+		this.options.height -= 2*((this.div.outerWidth(true) - this.div.innerWidth()) + parseInt(this.div.parent().css('padding-top')));
+		
+		if(this.options.height+"px" != this.div.css('height'))
+		{
+			this.div.css('height', this.options.height);
+			
+			// Re-do time grid
+			this._drawGrid()
+		}
 	}
 });
 et2_register_widget(et2_calendar_timegrid, ["calendar-timegrid"]);
--- a/calendar/templates/default/app.css
+++ b/calendar/templates/default/app.css
@ -136,12 +136,19 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
-	width: 99%;
+	overflow: hidden;
 /* set via inline style on runtime:
 *  height:
 */
 }

+.calendar_calTimeGrid .calendar_calTimeGridScroll {
+	position: absolute;
+	bottom: 0px;
+	width: 100%;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
 .calendar_calTimeGrid.calendar_TimeGridNoLabel > .calendar_calDayCols {
 	top: 0em;
 }
@ -150,10 +157,9 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	top: 0em;
 }

-/* single row in the time-line, always used in conjunction with row_{on|off}, you dont need to set a bgcolor, but you can
+/* single row in the time-line you dont need to set a bgcolor, but you can
 */
 .calendar_calTimeRow {
-	position: absolute;
 	width: 100%;
 /* set via inline style on runtime:
 *  height:
@ -178,8 +184,8 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 */
 .calendar_calDayCols,.calendar_calDayCols12h,.calendar_calDayColsNoGrid{
 	position: absolute;
-	top: 2em;
-/*	bottom: 0px; does NOT work in IE, IE needs height: 100%! */
+	top: 0px;
+	/*	bottom: 0px; does NOT work in IE, IE needs height: 100%! */
 	height: 100%;
 	left: 45px;
 	right: 0px;
@ -200,14 +206,11 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 .calendar_calDayCol{
 	position: absolute;
 	top: 0px;
-	height: 100%;
-/* set via inline style on runtime:
+	height: 100%;/* set via inline style on runtime:
 *  left:
 *  width:
 */
-	border-left: 1px solid silver;
-	
-	/* Nice transition when changing days in a week */
+	border-left: 1px solid silver;/* Nice transition when changing days in a week */
 	-webkit-transition: 0.1s ease-in-out;
 }
 /* Calendar Id #
@ -217,7 +220,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget

 /* header for the dayCol
 */
-.calendar_calDayColHeader,.calendar_calGridHeader{
+.calendar_calDayColHeader,.calendar_calGridHeader,.calendar_calGridHeader > div {
 	position: absolute;
 	top: 0px;
 	left: 0px;
@ -234,6 +237,11 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 .calendar_calDayColHeader {
 	z-index:30;
 }
+.calendar_calGridHeader > div {
+	left: 45px;
+	right: 15px;
+	width: initial;
+}
 .calendar_calDayColHeader img {
 	vertical-align: middle;
 }
@ -395,7 +403,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 }

 .calendar_calAddEvent{
-	position: absolute;
 	width: 100%;
 	z-index: 10;
 }
--- a/calendar/templates/pixelegg/app.css
+++ b/calendar/templates/pixelegg/app.css
@ -1,3 +1,4 @@
+@import "../default/app.css";
 /**
 * EGroupware: CSS with less preprocessor
 *
@ -11,794 +12,6 @@
 * @package calendar
 * @version $Id$
 */
-/* $Id: app.css 53642 2015-09-14 15:31:58Z nathangray $ */
-/*Media print classes*/
-@media print {
-  .th td,
-  .row_on td,
-  .row_off td {
-    border: none !important;
-  }
-  img.calendar_print_button {
-    display: none !important;
-  }
-  tr.calendar_print_cat {
-    border-bottom: 1px solid gray;
-  }
-}
-/**
- * Sidebox
- */
-#calendar-sidebox_owner {
-  width: 82%;
-}
-#calendar-sidebox_cat_id {
-  width: 86%;
-}
-#calendar-sidebox_buttons tbody {
-  width: 100%;
-}
-#calendar-sidebox_date td.ui-datepicker-week-col {
-  cursor: pointer;
-}
-#calendar-sidebox_date .calendar_calHoliday {
-  background: inherit;
-}
-#calendar-sidebox_date .calendar_calHoliday a {
-  background-color: #dac0c0;
-}
-#calendar-todo {
-  float: right;
-  width: 30%;
-}
-/* Header classes */
-tr.dialogHeader td,
-tr.dialogHeader2 td,
-tr.dialogHeader3 td,
-tr.dialogHeader4 td,
-tr.dialogOperators td,
-.dialogFooterToolbar {
-  padding: 5px 0 5px 0;
-  vertical-align: middle;
-}
-.calendar_inputFullWidth input {
-  width: 100%;
-}
-/******************************************************************
- * CSS settings for the day, week and month view (timeGridWidget) *
- ******************************************************************/
-/*
-Names used in the "graphic" are the css classes from this file.
-The function names in class uiviews have the leading cal removed and a trailing Widget added:
-e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget method of uiviews.
-
-+++ calendar_calTimeGrid +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-+                #### calendar_calDayCols[12h|NoGrip] ###########################################################
-+                #... calendar_calDayCol ............................. ... calendar_calDayCol ..........................
-+                #.+- calendar_calDayColHeader ---------------------+. .+- calendar_calDayColHeader ------------------+.
-+                #.|                                       |. .|                                    |.
-+                #.+---------------------------------------+. .+------------------------------------+.
-+.calendar_calTimeRowTime.#.** calendar_calEventCol ***** ** calendar_calEventCol *****. .** calendar_calEventCol ***********************.
-+.              .#.*                  * *                  *. .*                                    *.
-+.              .#.*                  * *                  *. .*                                    *.
-+................#.*+- calendar_calEvent -----+* *                  *. .*                                    *.
-+.calendar_calTimeRowTime.#.*|                |* *                  *. .*+- calendar_calEvent[Private] --------------+*.
-+.              .#.*|                |* *+- calendar_calEvent -----+*. .*|                                  |*.
-+.              .#.*+----------------+* *|                |*. .*|                                  |*.
-+................#.*                  * *|                |*. .*|                                  |*.
-+.calendar_calTimeRowTime.#.*                  * *+----------------+*. .*|                                  |*.
-+.              .#.*                  * *                  *. .*+----------------------------------+*.
-
-*/
-/* custom ui-tooltip style for calendar
-*/
-.calendar_uitooltip {
-  padding: 0px;
-  position: absolute;
-  border: none;
-  max-height: 400px;
-  z-index: 9999;
-  max-width: 300px;
-  -webkit-box-shadow: 0 0 5px;
-  -moz-box-shadow: 0 0 5px;
-  box-shadow: 0 0 5px;
-}
-.calendar_size120b {
-  font-size: 120%;
-  font-weight: bold;
-}
-/* marks a day in the colum-header as today
- */
-.calendar_calToday {
-  background: #ffffcc;
-}
-.calendar_calWeek {
-  background: #ffffcc;
-  width: auto;
-  margin: 0 auto;
-  text-align: center;
-}
-.calendar_calMonth {
-  background: #ffffcc;
-  width: auto;
-  margin: 0 auto;
-  text-align: center;
-}
-/* marks a day in the colum-header as holiday
- */
-.calendar_calHoliday {
-  background: #dac0c0;
-}
-/* marks a day in the column-header additionaly as birthday of some contact,
- * it should work together with the backgrounds of calendar_calToday, calendar_calHoliday, th, row_on and row_off
- */
-.calendar_calBirthday,
-.calendar_calBirthday a {
-  color: black;
-  font-weight: bold;
-  font-style: italic;
-}
-/* timeGridWidget, contains timeRow's and dayCol's
- */
-.calendar_calTimeGrid {
-  position: relative;
-  top: 0px;
-  left: 0px;
-  border: 1px solid silver;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 99%;
-  /* set via inline style on runtime:
- *  height:
- */
-}
-.calendar_calTimeGrid.calendar_TimeGridNoLabel > .calendar_calDayCols {
-  top: 0em;
-}
-.calendar_calTimeGrid.calendar_TimeGridNoLabel > .calendar_calGridHeader {
-  top: 0em;
-}
-/* single row in the time-line, always used in conjunction with row_{on|off}, you dont need to set a bgcolor, but you can
- */
-.calendar_calTimeRow {
-  position: absolute;
-  width: 100%;
-  /* set via inline style on runtime:
- *  height:
- *  top:
- */
-}
-.calendar_calTimeRow:nth-child(odd) {
-  background-color: rgba(0, 0, 0, 0.01);
-}
-/* time in a timeRow
- */
-.calendar_calTimeRowTime {
-  padding-left: 5px;
-  height: 100%;
-  line-height: 14px;
-  font-size: 8pt;
-  text-align: left;
-}
-/* contains (multiple) dayCol's
- */
-.calendar_calDayCols,
-.calendar_calDayCols12h,
-.calendar_calDayColsNoGrid {
-  position: absolute;
-  top: 2em;
-  /*	bottom: 0px; does NOT work in IE, IE needs height: 100%! */
-  height: 100%;
-  left: 45px;
-  right: 0px;
-}
-/* 12h timeformat with am/pm
- */
-.calendar_calDayCols12h {
-  left: 65px;
-}
-/* no time grid --> no time column
- */
-.calendar_calDayColsNoTime {
-  left: 0px;
-}
-/* contains (multiple) eventCol's
- */
-.calendar_calDayCol {
-  position: absolute;
-  top: 0px;
-  height: 100%;
-  /* set via inline style on runtime:
- *  left:
- *  width:
- */
-  border-left: 1px solid silver;
-  /* Nice transition when changing days in a week */
-  -webkit-transition: 0.1s ease-in-out;
-}
-/* Calendar Id #
-*/
-#calendar-edit_id:before {
-  content: "#";
-}
-/* header for the dayCol
- */
-.calendar_calDayColHeader,
-.calendar_calGridHeader {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  right: 0px;
-  /* does not work in IE, but looks better in other browsers then width:100% */
-  text-align: center;
-  font-size: 100%;
-  white-space: nowrap;
-  border-bottom: 1px solid silver;
-  border-right: 1px solid silver;
-  height: 16px;
-  line-height: 16px;
-}
-.calendar_calDayColHeader {
-  z-index: 30;
-}
-.calendar_calDayColHeader img {
-  vertical-align: middle;
-}
-.calendar_calWeekNavHeader,
-.calendar_calMonthNavHeader {
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  right: 0px;
-  /* does not work in IE, but looks better in other browsers then width:100% */
-  text-align: center;
-  font-size: 100%;
-  white-space: nowrap;
-  border-bottom: 1px solid silver;
-  border-right: 1px solid silver;
-  height: 16px;
-  line-height: 12px;
-  z-index: 30;
-}
-.calendar_calWeekNavHeader,
-.calendar_calMonthNavHeader img {
-  vertical-align: middle;
-}
-.calendar_calViewUserNameBox {
-  position: absolute;
-  top: -1px;
-  width: 95%;
-  text-align: left;
-  font-size: 120%;
-  white-space: nowrap;
-  border: 1px solid gray;
-  height: 17px;
-  left: -1px;
-  padding-top: 0px;
-  padding-left: 10px;
-  background: #dac0c0;
-}
-.calendar_calViewUserName {
-  font-weight: normal;
-}
-.calendar_calViewUserName:first-letter {
-  text-transform: uppercase;
-}
-.calendar_calViewUserNameFirst:after {
-  content: ", ";
-}
-/* alarm_date widget disabled class
-*/
-.calendar_alarm_date_display {
-  display: none;
-}
-/*overwirte margin applied by egwGridView*/
-.calendar_alarm_grid {
-  margin-left: 0 !important;
-}
-/* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers)
- */
-.calendar_calGridHeader {
-  text-align: left;
-  padding-left: 3px;
-  z-index: 29;
-}
-#calendar-view_view tbody.ui-sortable {
-  cursor: default;
-}
-#calendar-view_view tbody.ui-sortable .calendar_calGridHeader {
-  cursor: ns-resize;
-}
-#calendar-view_view tbody.ui-sortable-disabled .calendar_calGridHeader {
-  cursor: pointer;
-}
-/* contains (multiple) events's
- */
-.calendar_calEventCol {
-  position: absolute;
-  top: 0px;
-  /*	bottom: 0px; does NOT work in IE, IE needs height: 100%! */
-  height: 100%;
-  /* set via inline style on runtime:
- *  left:
- *  width:
- */
-}
-/* contains one event: header-row & -body
- */
-.calendar_calEvent,
-.calendar_calEventPrivate {
-  position: absolute;
-  left: 0px;
-  right: 0px;
-  overflow: hidden;
-  z-index: 20;
-  border-width: 1px;
-  border-radius: 6px;
-  border-style: solid;
-  min-height: 1.2em;
-  min-width: 5px;
-  -moz-border-radius: 6px;
-  -webkit-border-radius: 6px;
-  /* It is important there are no CSS transitions, it breaks resize */
-  -webkit-transition: none;
-  -moz-transition: none !important;
-  -o-transition: none !important;
-  -ms-transition: none !important;
-  transition: none !important;
-  /* set via inline style on runtime:
- *  top: depending on startime
- *  height: depending on length
- *  border-color: depending on category
- *  background: depending on category (shade)
- *
- * These are defaults:
- */
-  background-color: #808080;
-  border-color: #808080;
-}
-.calendar_calEvent:hover {
-  cursor: pointer;
-}
-/**
- * User has not accepted the invitation
- */
-.calendar_calEventUnknown {
-  background-color: white !important;
-}
-/**
- * All participants accepted the invitation
- */
-.calendar_calEventAllAccepted {
-  border-style: solid;
-  border-width: 1px;
-}
-/**
- * All participants answered the invitation, but not all accepted
- */
-.calendar_calEventAllAnswered {
-  border-style: dotted;
-  border-width: 2px;
-}
-/**
- * Some participants did NOT answer the invitation
- */
-.calendar_calEventSomeUnknown {
-  border-style: dashed;
-  border-width: 1px;
-}
-.calendar_calEventTooltip {
-  border-radius: 6px;
-  -moz-border-radius: 6px;
-  -webkit-border-radius: 6px;
-  max-height: 400px;
-  overflow: auto;
-}
-.calendar_calAddEvent {
-  position: absolute;
-  width: 100%;
-  z-index: 10;
-}
-.calendar_calAddEvent:hover {
-  background-color: #D2D7FF;
-  cursor: pointer;
-}
-/* header-row of the event
- */
-.calendar_calEventHeader,
-.calendar_calEventHeaderSmall {
-  position: relative;
-  /* as the calendar_calEventIcons use postion: absolute! */
-  font-weight: bold;
-  font-size: 9pt;
-  text-align: left;
-  left: 0px;
-  right: 0px;
-  padding-left: 2px;
-  min-height: 1em;
-  /* set via inline style on runtime
- *  background-color: depending on category
- *	color: white || black depending on cat;
- */
-  background-color: #808080;
-}
-.calendar_calEventHeaderSmall {
-  font-size: 8pt;
-  line-height: 10pt;
-}
-.calendar_calEventIcons {
-  position: absolute;
-  right: 0px;
-  top: 0px;
-}
-.calendar_calEventIcons img {
-  height: 16px;
-}
-.calendar_calEventHeaderSmall .calendar_calEventIcons img {
-  height: 13px;
-}
-/* body of the event
- */
-.calendar_calEventBody,
-.calendar_calEventBodySmall {
-  padding: 0px 3px 0px;
-  left: 2px;
-  right: 2px;
-  height: 99%;
-  /* Gradient */
-  background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.85) 60%);
-  background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.85) 60%);
-  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.85) 60%);
-  background-position: 50% 50%;
-  -webkit-background-origin: padding-box;
-  background-origin: padding-box;
-  -webkit-background-clip: border-box;
-  background-clip: border-box;
-  -webkit-background-size: auto auto;
-  background-size: auto auto;
-}
-.calendar_calEventBodySmall {
-  font-size: 95%;
-}
-.calendar_calEventLabel {
-  font-weight: bold;
-  font-size: 90%;
-}
-.calendar_calEventTitle {
-  font-weight: bold;
-  font-size: 110%;
-}
-/* table of the dayView containing 2 cols: 1) day-view, 2) todos
-*/
-.calendar_calDayView {
-  width: 100%;
-}
-/* calDayTods is the day-view's todo column, containing the calDayTodoHeader and the calDayTodoTable
- */
-.calendar_calDayTodos .calendar_calDayTodosHeader {
-  margin: 0px;
-  padding: 2px;
-  font-weight: bold;
-}
-.calendar_calDayTodos .calendar_calDayTodosTable {
-  overflow: auto;
-  max-height: 400px;
-}
-.calendar_calDayTodos {
-  width: 98%;
-  margin-left: 10px;
-  border: 1px solid silver;
-}
-.calendar_calDayTodosHeader {
-  text-align: center;
-}
-/******************************************************
- * CSS settings for the planner views (calendar_plannerWidget) *
- ******************************************************/
-/* calendar_plannerWidget represents the whole planner, consiting of the calendar_plannerHeader and multiple plannerRowWidgets
- */
-.calendar_plannerWidget {
-  position: relative;
-  top: 0px;
-  left: 0px;
-  width: 99.5%;
-  border: 1px solid gray;
-  padding-right: 3px;
-}
-.calendar_plannerWidget:nth-child(odd) {
-  background-color: #ffffff;
-}
-.calendar_plannerWidget:nth-child(even) {
-  background-color: #f2f2f2;
-}
-/* calendar_plannerHeader contains a calendar_plannerHeaderTitle and multiple calendar_plannerHeaderRows
- */
-.calendar_plannerHeader {
-  position: relative;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  background-color: #e0e0e0;
-}
-/* calendar_plannerRowWidget contains a calendar_plannerRowHeader and multiple eventRowWidgets in an calendar_eventRows
- */
-.calendar_plannerRowWidget {
-  position: relative;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  min-height: 20px;
-}
-/* calendar_plannerScale represents a scale-row of the calendar_plannerHeader, containing multiple planner{Day|Week|Month}Scales
- */
-.calendar_plannerScale,
-.calendar_plannerScaleDay {
-  position: relative;
-  top: 0px;
-  left: 0%;
-  width: 100%;
-  height: 20px;
-  line-height: 20px;
-}
-.calendar_plannerScaleDay {
-  height: 28px;
-  line-height: 14px;
-}
-.calendar_plannerDayScale,
-.calendar_plannerMonthScale,
-.calendar_plannerWeekScale,
-.calendar_plannerHourScale,
-.calendar_plannerDayOfMonthScale {
-  position: absolute;
-  top: 0px;
-  /* left+width: is set by the code on runtime */
-  text-align: center;
-  height: 100%;
-  border: 1px solid white;
-  /* set via inline style on runtime:
- *  left:
- *  width:
- */
-}
-.calendar_plannerHourScale {
-  font-size: 90%;
-}
-.calendar_plannerDayScale {
-  font-size: 90%;
-}
-.calendar_plannerWeekScale {
-  line-height: 20px;
-}
-.calendar_plannerMonthScale {
-  font-weight: bold;
-}
-.calendar_plannerDayScale img,
-.calendar_plannerWeekScale img,
-.calendar_plannerMonthScale img,
-.calendar_plannerDayOfMonthScale img {
-  vertical-align: middle;
-}
-/* calendar_plannerRowHeader contains the user or category name of the calendar_plannerRowWidget
- */
-.calendar_plannerRowHeader,
-.calendar_plannerHeaderTitle {
-  position: absolute;
-  top: 0px;
-  left: 0%;
-  width: 15%;
-  /* need to be identical for calendar_plannerRowHeader and calendar_plannerHeaderTitle and match left of calendar_eventRows/calendar_plannerHeaderRows */
-  height: 100%;
-  line-height: 20px;
-  border: 1px solid white;
-}
-/* calendar_eventRows contain multiple eventRowWidgets
- */
-.calendar_eventRows,
-.calendar_plannerHeaderRows {
-  position: relative;
-  top: 0px;
-  left: 15%;
-  /* need to be identical for calendar_eventRows and calendar_plannerHeaderRows and match width of calendar_plannerRowHeader/calendar_plannerHeaderTitle */
-  width: 85%;
-  min-height: 20px;
-  height: 100%;
-}
-/**
- * Filler for month with less then 31 days in yearly planner
- */
-.calendar_eventRowsFiller {
-  position: absolute;
-  top: 0px;
-  height: 93%;
-  background-color: white;
-  border: 1px dashed gray;
-  border-right: none;
-}
-/**
- * Weekend or other special days in yearly planner
- */
-.calendar_eventRowsMarkedDay {
-  position: absolute;
-  top: 0px;
-  height: 100%;
-  z-index: 10;
-}
-.calendar_eventRowsMarkedDay.calendar_weekend {
-  background-color: #e0e0e0;
-}
-/* calendar_eventRowWidget contains non-overlapping events
- */
-.calendar_eventRowWidget {
-  position: relative;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 20px;
-  border: 1px solid white;
-}
-.calendar_plannerEvent,
-.calendar_plannerEventPrivate {
-  position: absolute;
-  top: 0px;
-  height: 100%;
-  overflow: hidden;
-  z-index: 20;
-  border: 1px solid black;
-  min-width: 5px;
-  /* set via inline style on runtime:
- *  left: depending on startime
- *  width: depending on length
- *  background-color: depending on category
- */
-}
-.calendar_plannerEvent img,
-.calendar_plannerEventPrivate img {
-  padding-top: 2px;
-}
-.calendar_plannerEvent:hover {
-  cursor: pointer;
-}
-/* Special colors for the year view */
-.calendar_cal_year_legend_weekend {
-  background-color: #CCCCCC;
-}
-.calendar_cal_year_legend {
-  background-color: #EFEFEF;
-}
-.calendar_cal_year_legend {
-  background-color: #FFFFCC;
-  z-index: 0;
-}
-.calendar_cal_year_weekend {
-  background-color: #F9F9CC;
-  z-index: 0;
-}
-.calendar_cal_year_today {
-  border-color: #EE0000;
-  border-width: 2px;
-}
-/**
- * edit series or exception popup used in eventWidget and
- * delete series and exceptions popup used in edit event
- */
-#dialog-content {
-  display: block;
-  height: 100px;
-  padding: 6px;
-  color: #666666;
-  font-size: 13px;
-  margin: -2px -1px 0px -2px;
-  width: 410px;
-}
-/**
- * Calendar Drag and Drop
- * Class for div to show forbiden drop
- */
-.calendar_d-n-d_timeCounter > span {
-  position: absolute;
-  background-color: #808080;
-  color: white;
-  left: 0;
-  width: 100% !important;
-  align: center;
-  border: dashed white 1px;
-  border-radius: 1px;
-}
-.calendar_timeDemo {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  background-color: #808080;
-  color: white;
-  width: 100%;
-  min-width: 5em;
-  align: center;
-  border: dashed white 1px;
-  border-radius: 1px;
-}
-.calendar_d-n-d_forbiden {
-  background-color: red;
-  height: 100%;
-  width: 100%;
-  text-align: center;
-}
-/*Class for div to demonstrate dragging time*/
-.calendar_d-n-d_timeCounter {
-  font-size: 1.1em;
-  font-weight: bold;
-  text-align: center;
-}
-.calendar_d-n-d_timeCounter .loading {
-  width: 16px;
-  height: 16px;
-  position: absolute;
-  bottom: 0px;
-  right: 0px;
-}
-#calendar-edit_action {
-  width: 10em;
-  padding-left: 10px;
-  margin-left: 5px;
-}
-#calendar-list_undelete_popup,
-#calendar-list_delete_popup {
-  display: none;
-}
-.calendar_freetime_header {
-  font-size: 120%;
-  font-weight: bold;
-}
-.calendar_freetime_timeframe {
-  position: relative;
-}
-.calendar_freetime_dow {
-  position: absolute;
-}
-img.calendar_print_button,
-img.calendar_print_appicon {
-  height: 24px;
-  width: 24px;
-}
-/*Sortable views*/
-.srotable_cal_wk_ph {
-  border: 2px	dashed gray;
-  height: 230px;
-  width: 99%;
-  background-color: #ece2f7;
-}
-.srotable_cal_day_ph {
-  position: relative;
-  width: 33.333333%;
-  height: 99%;
-  border: 2px	dashed gray;
-  background-color: #ece2f7;
-  display: inline-block;
-}
-/**
- * Home page portlets
- */
-.calendar_favorite_portlet .calendar_calMonthNavHeader a img,
-.calendar_favorite_portlet .calendar_calWeekNavHeader a img,
-.calendar_favorite_portlet .calendar_calDayColHeader a img,
-.calendar_favorite_portlet .calendar_plannerScale a img {
-  display: none;
-}
-#calendar-edit select#calendar-edit_duration {
-  width: 133px;
-}
-#calendar-edit_category {
-  max-width: 230px;
-}
-#calendar_sidebox_content .ui-datepicker div.ui-datepicker-buttonpane {
-  border-top: 0;
-  margin: 0;
-  padding-right: 3px;
-}
 /*generell*/
 .egw_fw_content_browser_iframe img[src$="svg"] {
  background-color: #828282 !important;
@ -1480,27 +693,12 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /* timeGridWidget, contains timeRow's and dayCol's
 */
 .calendar_calTimeGrid {
-  position: relative;
-  top: 0px;
-  left: 0px;
  border: 1px solid silver;
-  width: 99%;
  background-color: #f0f0f0;
  /* set via inline style on runtime:
     *  height:
     */
 }
-/* single row in the time-line, always used in conjunction with row_{on|off}, you dont need to set a bgcolor, but you can
- */
-.calendar_calTimeRow,
-.calendar_calTimeRowOff {
-  position: absolute;
-  width: 100%;
-  /* set via inline style on runtime:
-     *  height:
-     *  top:
-     */
-}
 .calendar_calTimeRow {
  /*	background-color: silver; */
  background-color: #fafafa;
@ -1668,7 +866,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  overflow: auto;
 }
 .calendar_calAddEvent {
-  position: absolute;
  width: 100%;
  z-index: 10;
 }
--- a/calendar/templates/pixelegg/app.less
+++ b/calendar/templates/pixelegg/app.less
@ -14,7 +14,7 @@


@import (reference) "../../../pixelegg/less/definitions.less";
-@import (less) "../default/app.css";
+@import (reference) "../default/app.css";



@ -800,30 +800,17 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
    font-style: italic;
 }

+
 /* timeGridWidget, contains timeRow's and dayCol's
 */
 .calendar_calTimeGrid{
-    position: relative;
-    top: 0px;
-    left: 0px;
    border:1px solid silver;
-    width: 99%;
    .background_color_10_gray;
    /* set via inline style on runtime:
     *  height:
     */
 }

-/* single row in the time-line, always used in conjunction with row_{on|off}, you dont need to set a bgcolor, but you can
- */
-.calendar_calTimeRow,.calendar_calTimeRowOff{
-    position: absolute;
-    width: 100%;
-    /* set via inline style on runtime:
-     *  height:
-     *  top:
-     */
-}
 .calendar_calTimeRow{
    /*	background-color: silver; */
    .background_color_5_gray;