diff --git a/calendar/inc/class.calendar_hooks.inc.php b/calendar/inc/class.calendar_hooks.inc.php index 2f86e1ead6..cb0c68896d 100644 --- a/calendar/inc/class.calendar_hooks.inc.php +++ b/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); } diff --git a/calendar/js/app.js b/calendar/js/app.js index 3baf590144..a87007255a 100644 --- a/calendar/js/app.js +++ b/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({ diff --git a/calendar/js/et2_widget_daycol.js b/calendar/js/et2_widget_daycol.js index 70fe279e57..4344fdc7a4 100644 --- a/calendar/js/et2_widget_daycol.js +++ b/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; } diff --git a/calendar/js/et2_widget_event.js b/calendar/js/et2_widget_event.js index 65ee69db42..3e5a9c9090 100644 --- a/calendar/js/et2_widget_event.js +++ b/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 : []; diff --git a/calendar/js/et2_widget_timegrid.js b/calendar/js/et2_widget_timegrid.js index 2d0401cdcf..837ce72618 100644 --- a/calendar/js/et2_widget_timegrid.js +++ b/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,8 +558,8 @@ 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() .attr('data-date', this.options.start_date) @@ -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('
' + html + '
'); + .append('
' + html + '
'); 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(); } } }); diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index bb93546561..2b367fa245 100644 --- a/calendar/templates/default/app.css +++ b/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;