From 3cc740d35eaeea5662cd9351cd8978bb9e2f4ba3 Mon Sep 17 00:00:00 2001 From: Nathan Gray Date: Wed, 19 Aug 2015 00:08:22 +0000 Subject: [PATCH] Calendar bugs - Remove tooltip border - Always show weekends in sidebox & 4 day view - variable granularity, weekN & month view show less - Added missing week numbers - Hide participants if more than one & calendar is combined --- calendar/js/app.js | 180 ++++++++++++++++++++++++- calendar/js/et2_widget_daycol.js | 110 +-------------- calendar/js/et2_widget_event.js | 8 +- calendar/js/et2_widget_timegrid.js | 48 +++++-- calendar/templates/default/sidebox.xet | 2 +- 5 files changed, 221 insertions(+), 127 deletions(-) diff --git a/calendar/js/app.js b/calendar/js/app.js index e83da8f34c..750afd17b0 100644 --- a/calendar/js/app.js +++ b/calendar/js/app.js @@ -1515,6 +1515,14 @@ app.classes.calendar = AppJS.extend( widget.set_show_weekend(view.show_weekend(state.state)); } },this, et2_valueWidget); + + // Granularity needs to be done seperately + grid.iterateOver(function(widget) { + if(widget.set_granularity) + { + widget.set_granularity(view.granularity(state.state)); + } + },this, et2_valueWidget); } } else @@ -1636,10 +1644,6 @@ app.classes.calendar = AppJS.extend( // Sidebox is updated, we can clear the flag this.state_update_in_progress = false; - // Show / Hide weekends in sidebox calendar based on if weekends should be shown - egw.css('#'+this.sidebox_et2.getWidgetById('date').input_date.attr('id') + ' .ui-datepicker-week-end', - (parseInt(this.state.days && this.state.days > 1 ? this.state.days: egw.preference('days_in_weekview','calendar'))) === 5 ? 'display: none;' : 'display: table-cell;'); - return; } // old calendar state handling on server-side (incl. switching to and from listview) @@ -2030,6 +2034,150 @@ app.classes.calendar = AppJS.extend( sprintf("%02d",date.getUTCMinutes()) + ':'+ sprintf("%02d",date.getUTCSeconds()) + 'Z'; }, + + /** + * Formats one or two dates (range) as long date (full monthname), optionaly with a time + * + * Take care of any timezone issues before you pass the dates in. + * + * @param {Date} first first date + * @param {Date} last=0 last date for range, or false for a single date + * @param {boolean} display_time=false should a time be displayed too + * @param {boolean} display_day=false should a day-name prefix the date, eg. monday June 20, 2006 + * @return string with formatted date + */ + long_date: function(first, last, display_time, display_day) + { + if(!first) return ''; + if(typeof first === 'string') + { + first = new Date(first); + } + if(typeof last == 'string' && last) + { + last = new Date(last); + } + if(!last || typeof last !== 'object') + { + last = false; + } + + if(!display_time) display_time = false; + if(!display_day) display_day = false; + + var range = ''; + + var datefmt = egw.preference('dateformat'); + var timefmt = egw.preference('timeformat') == 12 ? 'h:i a' : 'H:i'; + + var month_before_day = datefmt[0].toLowerCase() == 'm' || + datefmt[2].toLowerCase() == 'm' && datefmt[4] == 'd'; + + if (display_day) + { + range = jQuery.datepicker.formatDate('DD',first)+(datefmt[0] != 'd' ? ' ' : ', '); + } + for (var i = 0; i < 5; i += 2) + { + switch(datefmt[i]) + { + case 'd': + range += first.getUTCDate()+ (datefmt[1] == '.' ? '.' : ''); + if (last && (first.getUTCMonth() != last.getUTCMonth() || first.getFullYear() != last.getFullYear())) + { + if (!month_before_day) + { + range += jQuery.datepicker.formatDate('MM',first); + } + if (first.getFullYear() != last.getFullYear() && datefmt[0] != 'Y') + { + range += (datefmt[0] != 'd' ? ', ' : ' ') . first.getFullYear(); + } + if (display_time) + { + range += ' '+jQuery.datepicker.formatDate(dateTimeFormat(timefmt),first); + } + if (!last) + { + return range; + } + range += ' - '; + + if (first.getFullYear() != last.getFullYear() && datefmt[0] == 'Y') + { + range += last.getFullYear() + ', '; + } + + if (month_before_day) + { + range += jQuery.datepicker.formatDate('MM',last); + } + } + else + { + if (display_time) + { + range += ' '+jQuery.datepicker.formatDate(dateTimeFormat(timefmt),last); + } + if(last) + { + range += ' - '; + } + } + if(last) + { + range += ' ' + last.getUTCDate() + (datefmt[1] == '.' ? '.' : ''); + } + break; + case 'm': + case 'M': + range += ' '+jQuery.datepicker.formatDate('MM',month_before_day ? first : last) + ' '; + break; + case 'Y': + if (datefmt[0] != 'm') + { + range += ' ' + (datefmt[0] == 'Y' ? first.getFullYear()+(datefmt[2] == 'd' ? ', ' : ' ') : last.getFullYear()+' '); + } + break; + } + } + if (display_time && last) + { + range += ' '+jQuery.datepicker.formatDate(dateTimeFormat(timefmt),last); + } + if (datefmt[4] == 'Y' && datefmt[0] == 'm') + { + range += ', ' + last.getFullYear(); + } + return range; + }, + /** + * Calculate iso8601 week-number, which is defined for Monday as first day of week only + * + * We adjust the day, if user prefs want a different week-start-day + * + * @param string|Date date + * @return string + */ + week_number: function(_date) + { + var d = new Date(_date); + var day = d.getUTCDay(); + + + // if week does not start Monday and date is Sunday --> add one day + if (egw.preference('weekdaystarts','calendar') != 'Monday' && !day) + { + d.setUTCDate(d.getUTCDate() + 1); + } + // if week does start Saturday and $time is Saturday --> add two days + else if (egw.preference('weekdaystarts','calendar') == 'Saturday' && day == 6) + { + d.setUTCDate(d.getUTCDate() + 2); + } + + return jQuery.datepicker.iso8601Week(new Date(d.valueOf() + d.getTimezoneOffset() * 60 * 1000)); + }, start_of_week: function(date) { var d = new Date(date); @@ -2038,7 +2186,7 @@ app.classes.calendar = AppJS.extend( switch(egw.preference('weekdaystarts','calendar')) { case 'Saturday': - diff = day === 6 ? 0 : day === 0 ? -1 : day + 1; + diff = day === 6 ? 0 : day === 0 ? -1 : -(day + 1); break; case 'Monday': diff = day === 0 ? 1 : 1-day; @@ -2250,6 +2398,9 @@ app.classes.calendar = AppJS.extend( { return state.days ? parseInt(state.days) === 7 : parseInt(egw.preference('days_in_weekview','calendar')) == 7; }, + granularity: function(state) { + return parseInt(egw.preference('interval','calendar')) || 30; + }, extend: function(sub) { return jQuery.extend({},this,{_super:this},sub); @@ -2349,11 +2500,17 @@ jQuery.extend(app.classes.calendar,{ d.setUTCSeconds(59); d.setUTCMilliseconds(0); return d; + }, + show_weekend: function(state) { + return true; } }), week: app.classes.calendar.prototype.View.extend({ header: function(state) { - return egw.lang('Week view') + ': ' + app.calendar.View.header.call(this, state); + var formatDate = new Date(state.first); + return egw.lang('Week view') + ': ' + egw.lang('Week') + ' ' + + app.calendar.date.week_number(state.first) + ': ' + + app.calendar.date.long_date(state.first, state.last) }, start_date: function(state) { return app.calendar.date.start_of_week(app.calendar.View.start_date.call(this,state)); @@ -2375,7 +2532,10 @@ jQuery.extend(app.classes.calendar,{ }), weekN: app.classes.calendar.prototype.View.extend({ header: function(state) { - return egw.lang('Multiple week view') + ': ' + app.calendar.View.header.call(this, state); + return 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) }, start_date: function(state) { return app.calendar.date.start_of_week(state.date || new Date()); @@ -2387,6 +2547,9 @@ jQuery.extend(app.classes.calendar,{ // Always 7 days, we just turn weekends on or off d.setUTCHours(24*7-1); return d; + }, + granularity: function(state) { + return 120; } }), month: app.classes.calendar.prototype.View.extend({ @@ -2410,6 +2573,9 @@ jQuery.extend(app.classes.calendar,{ week_start.setUTCHours(week_start.getUTCHours()-1); return week_start; }, + granularity: function(state) { + return 120; + }, scroll: function(delta) { var d = new Date(app.calendar.state.date); diff --git a/calendar/js/et2_widget_daycol.js b/calendar/js/et2_widget_daycol.js index bc584d1ade..face240c6a 100644 --- a/calendar/js/et2_widget_daycol.js +++ b/calendar/js/et2_widget_daycol.js @@ -195,7 +195,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea // Add timezone offset back in, or formatDate will lose those hours var formatDate = new Date(this.date.valueOf() + this.date.getTimezoneOffset() * 60 * 1000); var date_string = this._parent._children.length === 1 ? - this.long_date(formatDate,false, false, true) : + app.calendar.date.long_date(formatDate,false, false, true) : jQuery.datepicker.formatDate('DD dd',formatDate); this.title.text(date_string); @@ -550,114 +550,6 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea return pos; }, - /** - * Formats one or two dates (range) as long date (full monthname), optionaly with a time - * - * Take care of any timezone issues before you pass the dates in. - * - * @param {Date} first first date - * @param {Date} last=0 last date for range, or false for a single date - * @param {boolean} display_time=false should a time be displayed too - * @param {boolean} display_day=false should a day-name prefix the date, eg. monday June 20, 2006 - * @return string with formatted date - */ - long_date: function(first, last, display_time, display_day) - { - if(!last || typeof last !== 'object') - { - last = false; - } - - if(!display_time) display_time = false; - if(!display_day) display_day = false; - - var range = ''; - - var datefmt = egw.preference('dateformat'); - var timefmt = egw.preference('timeformat') == 12 ? 'h:i a' : 'H:i'; - - var month_before_day = datefmt[0].toLowerCase() == 'm' || - datefmt[2].toLowerCase() == 'm' && datefmt[4] == 'd'; - - if (display_day) - { - range = jQuery.datepicker.formatDate('DD',first)+(datefmt[0] != 'd' ? ' ' : ', '); - } - for (var i = 0; i < 5; i += 2) - { - switch(datefmt[i]) - { - case 'd': - range += first.getUTCDate()+ (datefmt[1] == '.' ? '.' : ''); - if (last && (first.getUTCMonth() != last.getUTCMonth() || first.getFullYear() != last.getFullYear())) - { - if (!month_before_day) - { - range += jQuery.datepicker.formatDate('MM',first); - } - if (first.getFullYear() != last.getFullYear() && datefmt[0] != 'Y') - { - range += (datefmt[0] != 'd' ? ', ' : ' ') . first.getFullYear(); - } - if (display_time) - { - range += ' '+jQuery.datepicker.formatDate(dateTimeFormat(timefmt),first); - } - if (!last) - { - return range; - } - range += ' - '; - - if (first.getFullYear() != last.getFullYear() && datefmt[0] == 'Y') - { - range += last.getFullYear() + ', '; - } - - if (month_before_day) - { - range += jQuery.datepicker.formatDate('MM',last); - } - } - else - { - if (display_time) - { - range += ' '+jQuery.datepicker.formatDate(dateTimeFormat(timefmt),last); - } - if(last) - { - range += ' - '; - } - } - if(last) - { - range += ' ' + last.getUTCDate() + (datefmt[1] == '.' ? '.' : ''); - } - break; - case 'm': - case 'M': - range += ' '+jQuery.datepicker.formatDate('MM',month_before_day ? first : last) + ' '; - break; - case 'Y': - if (datefmt[0] != 'm') - { - range += ' ' + (datefmt[0] == 'Y' ? first.getFullYear()+(datefmt[2] == 'd' ? ', ' : ' ') : last.getFullYear()+' '); - } - break; - } - } - if (display_time && last) - { - range += ' '+jQuery.datepicker.formatDate(dateTimeFormat(timefmt),last); - } - if (datefmt[4] == 'Y' && datefmt[0] == 'm') - { - range += ', ' + last.getFullYear(); - } - return range; - }, - attachToDOM: function() { this._super.apply(this, arguments); diff --git a/calendar/js/et2_widget_event.js b/calendar/js/et2_widget_event.js index 1049ba3a21..4505c1fdce 100644 --- a/calendar/js/et2_widget_event.js +++ b/calendar/js/et2_widget_event.js @@ -48,7 +48,13 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM], this.div = $j(document.createElement("div")) .addClass("calendar_calEvent") .addClass(this.options.class) - .css('width',this.options.width); + .css('width',this.options.width) + .on('mouseenter', function() { + // Hacky to remove egw's tooltip border + window.setTimeout(function() { + $j('body .egw_tooltip').css('border','none'); + },105); + }); this.title = $j(document.createElement('div')) .addClass("calendar_calEventHeader") .appendTo(this.div); diff --git a/calendar/js/et2_widget_timegrid.js b/calendar/js/et2_widget_timegrid.js index cc3638ded1..d251330703 100644 --- a/calendar/js/et2_widget_timegrid.js +++ b/calendar/js/et2_widget_timegrid.js @@ -122,6 +122,10 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz // Used for owners this.owner = et2_createWidget('select-account_ro',{},this); + + this._labelContainer = $j(document.createElement("label")) + .addClass("et2_label") + .appendTo(this.gridHeader); // List of dates in Ymd // The first one should be start_date, last should be end_date @@ -449,6 +453,8 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz * lines (mostly via CSS) that span the whole time span. */ _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; @@ -1006,7 +1012,8 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz set_owner: function(_owner) { var old = this.options.owner || 0; - + this.owner.set_label(''); + if(typeof _owner == 'string' && isNaN(_owner)) { switch(_owner[0]) @@ -1019,16 +1026,12 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz } else if (typeof _owner == 'object' && _owner.length) { - this.owner.options.application = false; - var owner_objected = []; - for(var i = 0; i < _owner.length; i++) + // Don't show owners if more than one, show week number + this.owner.set_value(''); + if(this.options.start_date) { - owner_objected[i] = { - app: _owner[i][0] == 'r' ? 'resources' : 'home-accounts', - id: isNaN(_owner[i]) ? _owner[i].substr(1) : _owner[i] - }; + this.set_label(egw.lang('wk') + ' ' +app.calendar.date.week_number(this.options.start_date)); } - this.owner.set_value(owner_objected); } else { @@ -1046,7 +1049,34 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz this.invalidate(true); } }, + + /** + * Set a label for this week + * + * May conflict with owner, which is displayed when there's only one owner. + * + * @param {string} label + */ + set_label: function(label) + { + this.options.label = label; + this.gridHeader.text(label); + }, + /** + * Set how big the time divisions are + * + * @param {number} minutes + */ + set_granularity: function(minutes) + { + if(this.options.granularity != minutes) + { + this.options.granularity = minutes; + this._drawTimes(); + } + }, + /** * Turn on or off the visibility of weekends * diff --git a/calendar/templates/default/sidebox.xet b/calendar/templates/default/sidebox.xet index 86fa8a2584..7dcf56aa80 100644 --- a/calendar/templates/default/sidebox.xet +++ b/calendar/templates/default/sidebox.xet @@ -27,7 +27,7 @@ Egroupware - +