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

@@ -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);

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);

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);

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;
+			// Don't show owners if more than one, show week number
-			var owner_objected = [];
+			this.owner.set_value('');
-			for(var i = 0; i < _owner.length; i++)
+			if(this.options.start_date)
 			{
-				owner_objected[i] = {
+				this.set_label(egw.lang('wk') + ' ' +app.calendar.date.week_number(this.options.start_date));
-					app: _owner[i][0] == 'r' ? 'resources' : 'home-accounts',
-					id: isNaN(_owner[i]) ? _owner[i].substr(1) : _owner[i]
-				};
 			}
-			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
 	 *

calendar/templates/default/sidebox.xet

@@ -27,7 +27,7 @@ Egroupware
 				</columns>
 				<rows><row width="100%">
 				<buttononly align="center" class="sideboxstar" id="add" onclick="egw.open(null,'calendar','add');" image="new" label="Add"/>
-				<buttononly align="center" class="sideboxstar" id="day" image="today" label="Today" onclick="app.calendar.update_state({view:'day',date:new Date()});"/>
+				<buttononly align="center" class="sideboxstar" id="day" image="today" label="Today" onclick="var formatDate = new Date(); app.calendar.update_state({view:'day',date:new Date(formatDate.valueOf() - formatDate.getTimezoneOffset() * 60 * 1000)});"/>
 				<buttononly align="center" class="sideboxstar" id="week" image="week" label="Weekview" onclick="app.calendar.update_state({view:'week'});"/>
 				<buttononly align="center" class="sideboxstar" id="weekN" image="multiweek" label="Multiple week view" onclick="app.calendar.update_state({view:'weekN'});"/>
 				<buttononly align="center" class="sideboxstar" id="month" image="month" label="Month view" onclick="app.calendar.update_state({view:'month'});"/>