Calendar display issues

- Keep planner header if you have to scroll down
- Show full hour at the end of the day, not just first division

calendar/js/et2_widget_planner.js

@@ -679,12 +679,17 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
 			grouper.group.call(this, labels, events, this.value[i]);
 		}
 
+		// Set height for rows
+		this.rows.height(this.div.parent().height() - this.headers.outerHeight());
+
 		// Draw the rows
 		for(var key in labels)
 		{
 			grouper.draw_row.call(this,labels[key].id, labels[key].label, events[key] || []);
 		}
 
+		// Adjust header if there's a scrollbar
+		this.gridHeader.css('margin-right', (this.rows.width() - this.rows.children().first().width()) + 'px')
 		this.value = [];
 	},
 
@@ -1417,8 +1422,8 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
 							value.push(egw.dataGetUIDdata('calendar::'+c.data[j]).data);
 						}
 					}
+					last_data = c.data;
 				}
-				last_data = c.data;
 			}
 			else
 			{

calendar/js/et2_widget_timegrid.js

@@ -501,11 +501,11 @@ 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);
+		var rowsToDisplay	= (totalDisplayMinutes/granularity) + (60 / granularity);
 		// Percent
 		var rowHeight = (100/rowsToDisplay).toFixed(1);
-		// Pixels
+		// Pixels - add 1 for room for header
-		this.rowHeight = this.div.height() / rowsToDisplay;
+		this.rowHeight = this.div.height() / (rowsToDisplay + 1);
 
 		this.gridHeader
 			.empty()

calendar/templates/default/app.css

@@ -540,20 +540,16 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	border: 1px solid gray;
 	padding-right: 3px;
 }
-.calendar_plannerWidget:nth-child(odd) {
+.calendar_plannerWidget > div:not(.calendar_plannerHeader) {
-	background-color: #ffffff;
+	overflow-y: auto;
+	overflow-x: hidden;
 }
-.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;
 }
 
@@ -566,6 +562,12 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	width: 100%;
 	min-height: 20px;
 }
+.calendar_plannerRowWidget:nth-child(odd) {
+	background-color: #ffffff;
+}
+.calendar_plannerRowWidget:nth-child(even) {
+	background-color: #f2f2f2;
+}
 
 /* calendar_plannerScale represents a scale-row of the calendar_plannerHeader, containing multiple planner{Day|Week|Month}Scales
  */

calendar/templates/pixelegg/app.css

@@ -1006,18 +1006,9 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /******************************************************
  * CSS settings for the planner views (calendar_plannerWidget) *
  ******************************************************/
-.row_on {
-  background-color: #ffffff;
-}
-.row_off {
-  background-color: #f2f2f2;
-}
 /* 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;
@@ -1025,30 +1016,10 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 .calendar_plannerWidget img {
   height: 16px;
 }
-/* calendar_plannerHeader contains a calendar_plannerHeaderTitle and multiple calendar_plannerHeaderRows
- */
-.calendar_plannerHeader {
-  position: relative;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-}
-/* calendar_plannerRowWidget contains a calendar_plannerRowHeader and multiple eventRowWidgets in an calendar_eventRows
- */
-.calendar_plannerRowWidget {
-  position: relative;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-}
 /* 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;
 }
@@ -1061,8 +1032,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 .calendar_plannerWeekScale,
 .calendar_plannerHourScale,
 .calendar_plannerDayOfMonthScale {
-  position: absolute;
-  top: 0px;
   /* left+width: is set by the code on runtime */
   text-align: center;
   height: 100%;
@@ -1098,9 +1067,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  */
 .calendar_plannerRowHeader,
 .calendar_plannerHeaderTitle {
-  position: absolute;
-  top: 0px;
-  left: 0%;
   width: auto;
   /* need to be identical for calendar_plannerRowHeader and calendar_plannerHeaderTitle and match left of calendar_eventRows/calendar_plannerHeaderRows */
   height: 100%;
@@ -1111,8 +1077,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  */
 .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%;
@@ -1121,39 +1085,18 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  * 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_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:

calendar/templates/pixelegg/app.less

@@ -1082,15 +1082,9 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  * CSS settings for the planner views (calendar_plannerWidget) *
  ******************************************************/
 
-.row_on { background-color: @color_even;}
-.row_off { background-color: @color_odd;}
-
 /* 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;
@@ -1098,31 +1092,10 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
     img{.dimension_height_s;}
 }
 
-/* calendar_plannerHeader contains a calendar_plannerHeaderTitle and multiple calendar_plannerHeaderRows
- */
-.calendar_plannerHeader {
-    position: relative;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-}
-
-/* calendar_plannerRowWidget contains a calendar_plannerRowHeader and multiple eventRowWidgets in an calendar_eventRows
- */
-.calendar_plannerRowWidget {
-    position: relative;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-}
 
 /* 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;
 }
@@ -1131,8 +1104,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
     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%;
@@ -1163,9 +1134,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /* calendar_plannerRowHeader contains the user or category name of the calendar_plannerRowWidget
  */
 .calendar_plannerRowHeader, .calendar_plannerHeaderTitle {
-    position: absolute;
-    top: 0px;
-    left: 0%;
     width: auto;		/* need to be identical for calendar_plannerRowHeader and calendar_plannerHeaderTitle and match left of calendar_eventRows/calendar_plannerHeaderRows */
     height: 100%;
     line-height: 20px;
@@ -1175,8 +1143,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /* 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%;
 }
@@ -1185,41 +1151,20 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  * 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_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: