diff --git a/calendar/js/et2_widget_planner.js b/calendar/js/et2_widget_planner.js index 9f2d472f3d..cdd1e490a1 100644 --- a/calendar/js/et2_widget_planner.js +++ b/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 { diff --git a/calendar/js/et2_widget_timegrid.js b/calendar/js/et2_widget_timegrid.js index c36de1df92..1135855acf 100644 --- a/calendar/js/et2_widget_timegrid.js +++ b/calendar/js/et2_widget_timegrid.js @@ -496,16 +496,16 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz */ _drawTimes: function() { $j('.calendar_calTimeRow',this.div).remove(); - + var wd_start = 60*this.options.day_start; 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 - this.rowHeight = this.div.height() / rowsToDisplay; + // Pixels - add 1 for room for header + this.rowHeight = this.div.height() / (rowsToDisplay + 1); this.gridHeader .empty() diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index 4144f600eb..13ed91b208 100644 --- a/calendar/templates/default/app.css +++ b/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) { - background-color: #ffffff; +.calendar_plannerWidget > div:not(.calendar_plannerHeader) { + 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 */ diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index a4aa7205c9..e2ec9b5d8b 100755 --- a/calendar/templates/pixelegg/app.css +++ b/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: diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less index 5c47bd6463..92f11210ca 100755 --- a/calendar/templates/pixelegg/app.less +++ b/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: