Planner view

- When changing into planner view, keep the current time span
- Today button keeps displayed number of days
- Remove header arrows, planner now uses same navigation as others

calendar/js/app.js

@@ -609,7 +609,10 @@ app.classes.calendar = AppJS.extend(
 						.css({"transform": '',height: '', width:'',overflow:''});
 					wrapper.parent().css({overflow: '', width: original_size.width, height: original_size.height});
 					original.css("display","");
-					wrapper[0].offsetHeight;
+					if(wrapper.length)
+					{
+						wrapper[0].offsetHeight;
+					}
 					wrapper.css({
 						"transition-duration": "",
 						"transition-delay": ""
@@ -3300,6 +3303,13 @@ jQuery.extend(app.classes.calendar,{
 				return state.sortby ? state.sortby : 0;
 			},
 			start_date: function(state) {
+				// If there is no planner_days and a start date, just keep it
+				if(!state.planner_days && state.first && (
+					!state.date || state.first < state.date && state.last > state.date
+				))
+				{
+					return state.first;
+				}
 				var d = app.calendar.View.start_date.call(this, state);
 				if(state.sortby && state.sortby === 'month')
 				{
@@ -3307,10 +3317,6 @@ jQuery.extend(app.classes.calendar,{
 				}
 				else if (!state.planner_days)
 				{
-					if(d.getUTCDate() < 15)
-					{
-						d.setUTCDate(1);
-					}
 					d = app.calendar.date.start_of_week(d);
 					d.setUTCHours(0);
 					d.setUTCMinutes(0);
@@ -3321,6 +3327,26 @@ jQuery.extend(app.classes.calendar,{
 				return d;
 			},
 			end_date: function(state) {
+				// If no planner days and an end date, just keep it
+				if(!state.planner_days && state.last && state.last > state.first)
+				{
+					// Handle listview before / after a little more nicely
+					if(app.calendar.state.view == 'listview' && (
+						state.filter == 'before' || state.filter == 'after'
+					))
+					{
+						var d = app.calendar.View.end_date.call(this, state);
+						d.setUTCDate(d.getUTCDate() + 30);
+						d = app.calendar.date.end_of_week(d);
+						return d;
+					}
+					return state.last;
+				}
+				// Avoid end date before start date
+				if(state.last && state.first && state.last <= state.first && !state.planner_days)
+				{
+					state.planner_days = 30;
+				}
 				var d = app.calendar.View.end_date.call(this, state);
 				if(state.planner_days)
 				{
@@ -3337,24 +3363,14 @@ jQuery.extend(app.classes.calendar,{
 					delete state.planner_days;
 				}
 				// Avoid killing the view by not showing more than 100 days
-				else if (state.last && (new Date(state.last) - new Date(state.first)) < (100 * 24 * 3600 * 1000) )
+				else if (state.last && state.last > state.first && (new Date(state.last) - new Date(state.first)) < (100 * 24 * 3600 * 1000) )
 				{
 					d = new Date(state.last);
 					d = app.calendar.date.end_of_week(d);
 				}
 				else if (!state.planner_days)
 				{
-					if (d.getUTCDate() < 15)
+					d = app.calendar.date.end_of_week(d);
-					{
-						d.setUTCDate(0);
-						d.setUTCMonth(d.getUTCMonth()+1);
-						d = app.calendar.date.end_of_week(d);
-					}
-					else
-					{
-						d.setUTCMonth(d.getUTCMonth()+1);
-						d = app.calendar.date.end_of_week(d);
-					}
 				}
 				return d;
 			},

calendar/js/et2_widget_planner.js

@@ -843,7 +843,10 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
 		}
 
 		// Adjust header if there's a scrollbar
-		this.gridHeader.css('margin-right', (this.rows.width() - this.rows.children().first().width()) + 'px')
+		if(this.rows.children().first().length)
+		{
+			this.gridHeader.css('margin-right', (this.rows.width() - this.rows.children().first().width()) + 'px');
+		}
 		this.value = [];
 	},
 
@@ -893,23 +896,6 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
 		var title = app.calendar.egw.lang(date('F',start))+' '+date('Y',start)+' - '+
 			app.calendar.egw.lang(date('F',end))+' '+date('Y',end);
 
-		// calculate date for navigation links
-		var time = new Date(start);
-		time.setUTCFullYear(time.getUTCFullYear()-1);
-		var last_year = time.toJSON();
-		time.setUTCMonth(time.getUTCMonth()+11);
-		var last_month = time.toJSON();
-		time.setUTCMonth(time.getUTCMonth()+2);
-		var next_month = time.toJSON();
-		time.setUTCMonth(time.getUTCMonth()+11);
-		var next_year = time.toJSON();
-
-		title = this._scroll_button('first',last_year) +
-			this._scroll_button('left', last_month) +
-			title +
-			this._scroll_button('right', next_month) +
-			this._scroll_button('last', next_year);
-
 		content += '<div class="calendar_plannerMonthScale th et2_link" style="left: 0; width: 100%;">'+
 				title+"</div>";
 		content += "</div>";		// end of plannerScale
@@ -960,33 +946,6 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
 			if (days_in_month > 10)
 			{
 				title += ' '+t.getUTCFullYear();
-			
-				// previous links
-				var prev = new Date(t);
-				prev.setUTCMonth(prev.getUTCMonth()-1);
-				if(prev.valueOf() < start.valueOf() - (20 * 1000*3600*24))
-				{
-					var full = prev.toJSON();
-					prev.setUTCDate(prev.getUTCDate() + 15);
-					//prev.setUTCDate(start.getUTCDate() < 15 ? 1 : 15);
-					var half = prev.toJSON();
-					title = this._scroll_button('first',full) + this._scroll_button('left',half) + title;
-				}
-			
-				// show next scales, if there are less then 10 days in the next month or there is no next month
-				var days_until_end = (end - t) / (1000 * 3600 * 24);
-				if (days_until_end - days_in_month <= 10 || end.getUTCMonth() === t.getUTCMonth() && end.getUTCFullYear() === t.getUTCFullYear())
-				{
-					// next links
-					var next = new Date(t);
-					next.setUTCMonth(next.getUTCMonth()+1);
-					full = next.toJSON();
-					next.setUTCDate(next.getUTCDate() - 15);
-					//next.setUTCDate(next.getUTCDate() < 15 ? 1 : 15);
-					half = next.toJSON();
-
-					title += this._scroll_button('right',half) + this._scroll_button('last',full);
-				}
 			}
 			else
 			{
@@ -1048,24 +1007,7 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
 			state.setUTCHours(0);
 			state.setUTCMinutes(0);
 			state = state.toJSON();
-			if (days  <= 7)
-			{
-				// prev. week
-				var left = new Date(t);
-				left.setUTCHours(0);
-				left.setUTCMinutes(0);
-				left.setUTCDate(left.getUTCDate() - 7);
 
-				// next week
-				var right = new Date(t);
-				right.setUTCHours(0);
-				right.setUTCMinutes(0);
-				right.setUTCDate(right.getUTCDate() + 7);
-
-				title = this._scroll_button('left',app.calendar.date.start_of_week(left).toJSON()) +
-					title +
-					this._scroll_button('right',app.calendar.date.start_of_week(right).toJSON());
-			}
 			if(days_in_week > 1)
 			{
 				content += '<div class="calendar_plannerWeekScale et2_clickable et2_link" data-date=\'' + state + '\' style="left: '+left+'%; width: '+week_width+'%;">'+title+"</div>";
@@ -1118,25 +1060,7 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
 				title = app.calendar.egw.lang(date('D',t)).substr(0,2)+'<br />'+date('j',t);
 			}
 			state = new Date(t.valueOf() - start.getTimezoneOffset() * 60 * 1000).toJSON();
-			if (days < 5)
+
-			{
-				if (!i)	// prev. day only for the first day
-				{
-					var prev = new Date(t);
-					prev.setUTCDate(prev.getUTCDate() - 1);
-					prev.setUTCHours(0);
-					prev.setUTCMinutes(0);
-					title = this._scroll_button('left',prev.toJSON()) + title;
-				}
-				if (i == days-1)	// next day only for the last day
-				{
-					var next = new Date(t);
-					next.setUTCDate(next.getUTCDate() + 1);
-					next.setUTCHours(0);
-					next.setUTCMinutes(0);
-					title += this._scroll_button('right',next.toJSON());
-				}
-			}
 			content += '<div class="calendar_plannerDayScale et2_clickable et2_link '+ day_class+
 				'" data-date=\'' + state +'\' style="left: '+left+'%; width: '+day_width+'%;"'+
 				(holidays ? ' title="'+holidays.join(',')+'"' : '')+'>'+title+"</div>\n";
@@ -1190,15 +1114,6 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
 		return content;
 	},
 
-	/**
-	 * Create a pagination button, and inserts it
-	 * 
-	 */
-	_scroll_button: function(image, date)
-	{
-		return '<img class="et2_clickable" src="' + egw.image(image)+ '" data-date="' + (date.toJSON ? date.toJSON():date) + '"/>';
-	},
-
 	/**
 	 * Applies class for today, and any holidays for current day
 	 *

calendar/templates/default/sidebox.xet

@@ -40,14 +40,17 @@ Egroupware
 			<select id="view" class="et2_fullWidth" onchange="app.calendar.update_state(JSON.parse(widget.getValue()));"/>
 			<textbox id="keywords" class="et2_fullWidth" blur="Search" onchange="app.calendar.update_state({view: 'listview',keywords: widget.getValue()});return false;"/>
 			<hbox id="date_header" class="et2_fullWidth">
-				<buttononly id="header_today" label="Today" onclick="var tempDate = new Date();
+				<buttononly id="header_today" label="Today" onclick="
-					var today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(),0,-tempDate.getTimezoneOffset(),0);
+var tempDate = new Date();
-					app.calendar.update_state({date: today.toJSON()});return false;"/>
+var today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(),0,-tempDate.getTimezoneOffset(),0);
-				<buttononly id="header_month" label="Month" onclick="var change = {date: widget.btn.attr('data-date')}; if(app.calendar.state.view == 'planner') { change.planner_days = 0;change.last=false;} else if ( app.calendar.state.view == 'listview') {change.filter='month';} else {change.view = 'month';}app.calendar.update_state(change);" />
+var change = {date: today.toJSON()};
+if(app.calendar.state.view == 'planner') { change.planner_days = Math.ceil((new Date(app.calendar.state.last) - new Date(app.calendar.state.first)) / (24*3600000));}
+app.calendar.update_state(change);return false;"/>
+				<buttononly id="header_month" label="Month" onclick="var change = {date: widget.btn.attr('data-date')}; if(app.calendar.state.view == 'planner') { change.planner_days = 0;change.first=change.date;var d = new Date(change.date);d = new Date(d.getFullYear(),d.getUTCMonth() + 1, 0);change.last=d.toJSON();} else if ( app.calendar.state.view == 'listview') {change.filter='month';} else {change.view = 'month';}app.calendar.update_state(change);" />
 			</hbox>
 			<date id="date" class="et2_fullWidth" inline="true" onchange="var view_change = app.calendar.sidebox_changes_views.indexOf(app.calendar.state.view);
 var update = {date:widget.getValue()};
-if(view_change >= 0) {update.view = app.calendar.sidebox_changes_views[view_change ? view_change - 1 : view_change];} else if (app.calendar.state.view == 'listview') {update.filter = 'after';} app.calendar.update_state(update);"/>
+if(view_change >= 0) {update.view = app.calendar.sidebox_changes_views[view_change ? view_change - 1 : view_change];} else if (app.calendar.state.view == 'listview') {update.filter = 'after';} else if (app.calendar.state.view =='planner') { update.planner_days = 1; } app.calendar.update_state(update);"/>
 			<textbox type="hidden" id="first"/>
 			<textbox type="hidden" id="last"/>
 			<select-cat id="cat_id" empty_label="All categories" width="86%" onchange="app.calendar.update_state({cat_id: widget.getValue()});" expand_multiple_rows="4"/>