Planner view:

- Add vertical lines
- Keep larger timescale header for zooming out

calendar/js/et2_widget_planner.js

@@ -85,6 +85,10 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
 			.appendTo(this.gridHeader);
 
 		this.rows = $j(document.createElement("div"))
+			.addClass("calendar_plannerRows")
+			.appendTo(this.div);
+		this.grid = $j(document.createElement("div"))
+			.addClass("calendar_plannerGrid")
 			.appendTo(this.div);
 
 		this.vertical_bar = $j(document.createElement("div"))
@@ -296,21 +300,27 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
 				var start_date = new Date(start.getUTCFullYear(), start.getUTCMonth(),start.getUTCDate());
 				var end_date = new Date(end.getUTCFullYear(), end.getUTCMonth(),end.getUTCDate());
 				var day_count = Math.round((end_date - start_date) /(1000*3600*24))+1;
-				if(day_count >= 28)
+				if(day_count >= 6)
 				{
 					this.headers.append(this._header_months(start, day_count));
 				}
-				if(day_count >= 5 && day_count < 120)
+				if(day_count < 120)
 				{
-					this.headers.append(this._header_weeks(start, day_count));
+					var weeks = this._header_weeks(start, day_count);
+					this.headers.append(weeks);
+					this.grid.append(weeks);
 				}
 				if(day_count < 60)
 				{
-					this.headers.append(this._header_days(start, day_count));
+					var days = this._header_days(start, day_count);
+					this.headers.append(days);
+					this.grid.append(days);
 				}
 				if(day_count <= 7)
 				{
-					this.headers.append(this._header_hours(start, day_count));
+					var hours = this._header_hours(start, day_count);
+					this.headers.append(hours);
+					this.grid.append(hours);
 				}
 			},
 			// Labels for the rows
@@ -542,22 +552,27 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
 				var end_date = new Date(end.getUTCFullYear(), end.getUTCMonth(),end.getUTCDate());
 				var day_count = Math.round((end_date - start_date) /(1000*3600*24))+1;
 
-				if(day_count >= 28)
+				if(day_count >= 6)
 				{
 					this.headers.append(this._header_months(start, day_count));
 				}
-				
-				if(day_count >= 5 && day_count < 120)
+				if(day_count < 120)
 				{
-					this.headers.append(this._header_weeks(start, day_count));
+					var weeks = this._header_weeks(start, day_count);
+					this.headers.append(weeks);
+					this.grid.append(weeks);
 				}
 				if(day_count < 60)
 				{
-					this.headers.append(this._header_days(start, day_count));
+					var days = this._header_days(start, day_count);
+					this.headers.append(days);
+					this.grid.append(days);
 				}
 				if(day_count <= 7)
 				{
-					this.headers.append(this._header_hours(start, day_count));
+					var hours = this._header_hours(start, day_count);
+					this.headers.append(hours);
+					this.grid.append(hours);
 				}
 			},
 			row_labels: function() {
@@ -778,7 +793,9 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
 		}
 		
 		// Clear old rows
-		this.rows.empty();
+		this.rows.empty()
+			.append(this.grid);
+		this.grid.empty();
 
 		var grouper = this.groupers[isNaN(this.options.group_by) ? this.options.group_by : 'category'];
 		if(!grouper) return;
@@ -787,6 +804,9 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
 		this.headers.empty();
 		this.headerTitle.text(grouper.title.apply(this));
 		grouper.headers.apply(this);
+		this.grid.find('*').contents().filter(function(){
+			return this.nodeType === 3;
+		}).remove();
 		
 		// Get the rows / labels
 		var labels = grouper.row_labels.call(this);
@@ -825,9 +845,9 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
 		}
 
 		// Adjust header if there's a scrollbar
-		if(this.rows.children().first().length)
+		if(this.rows.children().last().length)
 		{
-			this.gridHeader.css('margin-right', (this.rows.width() - this.rows.children().first().width()) + 'px');
+			this.gridHeader.css('margin-right', (this.rows.width() - this.rows.children().last().width()) + 'px');
 		}
 		this.value = [];
 	},
@@ -921,15 +941,12 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
 			{
 				days_in_month = days - i;
 			}
-			if (days_in_month > 5)
-			{
-				var title = app.calendar.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)
 			{
 				title += ' '+t.getUTCFullYear();
 			}
-			else
+			else if (days_in_month < 5)
 			{
 				title = '&nbsp;';
 			}
@@ -990,7 +1007,7 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
 			state.setUTCMinutes(0);
 			state = state.toJSON();
 
-			if(days_in_week > 1)
+			if(days_in_week > 1 || days == 1)
 			{
 				content += '<div class="calendar_plannerWeekScale et2_clickable et2_link" data-date=\'' + state + '\' style="left: '+left+'%; width: '+week_width+'%;">'+title+"</div>";
 			}

calendar/js/et2_widget_planner_row.js

@@ -272,7 +272,7 @@ var et2_calendar_planner_row = et2_valueWidget.extend([et2_IDetachedDOM],
 				rows[c][i].div.css('top', top+'%');
 				rows[c][i].div.css('height', (100/rows.length)+'%');
 				rows[c][i].div.css('left', left.toFixed(1)+'%');
-				rows[c][i].div.css('width', width.toFixed(1)+'%');
+				rows[c][i].div.outerWidth(width/100 *this.rows.width() +'px');
 			}
 		}
 		if(height)

calendar/templates/default/app.css

@@ -764,7 +764,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	top: 0px;
 	left: 0px;
 	width: 99.5%;
-	padding-right: 3px;
 	background-color: #f0f0f0;
 }
 .calendar_plannerWidget > div:not(.calendar_plannerHeader) {
@@ -778,7 +777,41 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	top: 0px;
 	left: 0px;
 }
-
+.calendar_plannerRows {
+	position:relative;
+}
+.calendar_plannerGrid {
+	position: absolute;
+	top: 0px;
+	bottom: 0px;
+	left: 172px;
+	right: 0px;
+	overflow:hidden;
+	height: 100%;
+	border-left: 1px solid silver;
+	margin-left: -1px;
+}
+.calendar_plannerGrid > .calendar_plannerScale,
+.calendar_plannerGrid > .calendar_plannerScaleDay {
+	height: 100%;
+	position: absolute;
+}
+.calendar_plannerGrid .calendar_calToday, .calendar_plannerGrid .calendar_calHoliday {
+	background-color: initial;
+}
+.calendar_plannerGrid > div:nth-last-child(2) > div {
+	border: none;
+	border-right: 1px solid silver;
+}
+.calendar_plannerGrid > div:last-child > div {
+	border: none;
+}
+.calendar_plannerGrid > div:last-child > div:not(:first-child)  {
+	background-image: linear-gradient(0deg, rgba(192, 192, 192, 0.75) 4px, transparent 0%);
+    background-position: top left;
+    background-size: 1px 10px;
+    background-repeat: repeat-y;
+}
 /* calendar_plannerRowWidget contains a calendar_plannerRowHeader and multiple eventRowWidgets in an calendar_eventRows
  */
 .calendar_plannerRowWidget {
@@ -787,7 +820,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	left: 0px;
 	width: 100%;
 	min-height: 20px;
-	background-color: white;
 }
 .calendar_plannerRowWidget:not(:first-child) {
 	border-top: 1px solid silver;
@@ -854,18 +886,20 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	width: 150px;
 	height: 100%;
 	line-height: 20px;
-	border-right: 1px solid silver;
 	text-overflow: ellipsis;
 	white-space:nowrap;
 	overflow:hidden;
 	padding-left: 20px;
-	padding-right: 2px;
+	padding-right: 1px;
 }
 .calendar_plannerRowHeader:hover {
 	overflow:visible;
 	z-index: 30;
 	cursor: pointer;
 }
+.calendar_plannerHeaderTitle {
+	border-right: 1px solid silver;
+}
 
 /* calendar_eventRows contain multiple eventRowWidgets
  */

calendar/templates/pixelegg/app.css

@@ -970,19 +970,12 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  */
 .calendar_plannerWidget {
   width: 99.5%;
-  border: 1px solid gray;
-  padding-right: 3px;
 }
 .calendar_plannerWidget img {
   height: 16px;
 }
 /* calendar_plannerScale represents a scale-row of the calendar_plannerHeader, containing multiple planner{Day|Week|Month}Scales
  */
-.calendar_plannerScale,
-.calendar_plannerScaleDay {
-  height: 20px;
-  line-height: 20px;
-}
 .calendar_plannerScaleDay {
   height: 28px;
   line-height: 14px;

calendar/templates/pixelegg/app.less

@@ -1067,8 +1067,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  */
 .calendar_plannerWidget {
     width: 99.5%;
-    border: 1px solid gray;
-    padding-right: 3px;
 
     img{.dimension_height_s;}
 }
@@ -1076,10 +1074,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 
 /* calendar_plannerScale represents a scale-row of the calendar_plannerHeader, containing multiple planner{Day|Week|Month}Scales
  */
-.calendar_plannerScale,.calendar_plannerScaleDay {
-    height: 20px;
-    line-height: 20px;
-}
 .calendar_plannerScaleDay {
     height: 28px;
     line-height: 14px;