holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Calendar bugs

Browse Source 
- 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
This commit is contained in:
Nathan Gray 2015-08-19 00:08:22 +00:00
parent 1684ec78b5
commit 3cc740d35e
5 changed files with 221 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
calendar/js/app.js
View File

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

110
calendar/js/et2_widget_daycol.js
View File

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

8
calendar/js/et2_widget_event.js
View File

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

48
calendar/js/et2_widget_timegrid.js
View File

@ -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
*

2
calendar/templates/default/sidebox.xet
View File

@ -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'});"/>