Calendar bugs

- Add loading spinner when changing (resize) an event
- If user changes the month using the sidebox calendar, switch to month view for that month
- Mark holidays on the sidebox calendar
- Change cursor over sidebox week number  to match cursor over days
This commit is contained in:
Nathan Gray 2015-08-24 17:28:19 +00:00
parent e334678ecc
commit f05a777215
4 changed files with 84 additions and 26 deletions

View File

@ -558,9 +558,13 @@ app.classes.calendar = AppJS.extend(
*/
event_change: function(event, widget, dialog_button)
{
// Add loading spinner - not visible if the body / gradient is there though
widget.div.addClass('loading');
egw().json(
'calendar.calendar_uiforms.ajax_moveEvent',
[widget.options.value.id, widget.options.value.owner, widget.options.value.start, widget.options.value.owner, widget.options.value.duration]
[widget.options.value.id, widget.options.value.owner, widget.options.value.start, widget.options.value.owner, widget.options.value.duration],
// Remove loading spinner
function() {widget.div.removeClass('loading');}
).sendRequest(true);
},
@ -2258,31 +2262,62 @@ app.classes.calendar = AppJS.extend(
if(date)
{
date.input_date.datepicker("option", {
showButtonPanel: false
// TODO: We could include tooltips for holidays
showButtonPanel: false,
onChangeMonthYear: function(year, month, inst)
{
// Switch to month view for that month
var date = new Date(app.calendar.state.date);
date.setUTCDate(1);
date.setFullYear(year);
date.setUTCMonth(month-1);
app.calendar.update_state({
view: 'month',
date: date
})
},
// Mark holidays
beforeShowDay: function (date)
{
var holidays = et2_calendar_daycol.get_holidays({day_class_holiday: function() {}}, date.getFullYear());
var day_holidays = holidays[''+date.getUTCFullYear() +
sprintf("%02d",date.getUTCMonth()+1) +
sprintf("%02d",date.getUTCDate())];
var css_class = '';
var tooltip = '';
if(typeof day_holidays !== 'undefined' && day_holidays.length)
{
for(var i = 0; i < day_holidays.length; i++)
{
if (typeof day_holidays[i]['birthyear'] !== 'undefined')
{
css_class +='calendar_calBirthday ';
}
else
{
css_class += 'calendar_calHoliday ';
}
tooltip += day_holidays[i]['name'] + "\n";
}
}
return [true, css_class, tooltip];
}
});
// Clickable week numbers
date.input_date.on('mouseenter','.ui-datepicker-week-col', function() {
$j(this).siblings().find('a').addClass('ui-state-hover');
})
.on('mouseleave','.ui-datepicker-week-col', function() {
$j(this).siblings().find('a').removeClass('ui-state-hover');
})
.on('click', '.ui-datepicker-week-col', function() {
// Fake a click event on the first day to get the updated date
$j(this).next().click();
// Set to week view
app.calendar.update_state({view: 'week', date: date.getValue()});
});
}
// Show / Hide weekends based on preference of weekends should be shown
egw.css('#'+date.input_date.attr('id') + ' .ui-datepicker-week-end',
egw.preference('days_in_weekview', 'calendar') === "5" ? 'display: none;' : 'display: table-cell;'
);
// Clickable week numbers
date.input_date.on('mouseenter','.ui-datepicker-week-col', function() {
$j(this).siblings().find('a').addClass('ui-state-hover');
})
.on('mouseleave','.ui-datepicker-week-col', function() {
$j(this).siblings().find('a').removeClass('ui-state-hover');
})
.on('click', '.ui-datepicker-week-col', function() {
// Fake a click event on the first day to get the updated date
$j(this).next().click();
// Set to week view
app.calendar.update_state({view: 'week', date: date.getValue()});
});
},
/**

View File

@ -25,6 +25,15 @@
#calendar-sidebox_buttons tbody {
width: 100%;
}
#calendar-sidebox_date td.ui-datepicker-week-col {
cursor: pointer;
}
#calendar-sidebox_date .calendar_calHoliday {
background: inherit;
}
#calendar-sidebox_date .calendar_calHoliday a {
background-color: #dac0c0;
}
#calendar-todo {
float: right;

View File

@ -11,7 +11,7 @@
* @package calendar
* @version $Id$
*/
/* $Id: app.css 53324 2015-08-06 17:14:20Z nathangray $ */
/* $Id: app.css 53347 2015-08-11 15:35:54Z nathangray $ */
/*Media print classes*/
@media print {
.th td,
@ -38,6 +38,15 @@
#calendar-sidebox_buttons tbody {
width: 100%;
}
#calendar-sidebox_date td.ui-datepicker-week-col {
cursor: pointer;
}
#calendar-sidebox_date .calendar_calHoliday {
background: inherit;
}
#calendar-sidebox_date .calendar_calHoliday a {
background-color: #dac0c0;
}
#calendar-todo {
float: right;
width: 30%;
@ -2276,6 +2285,9 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
#calendar_merge {
font-size: 11px;
}
#calendar-sidebox_date .calendar_calHoliday a {
background-color: #679fd2;
}
#uical_select_owner {
margin: 9px 0 9px;
}

View File

@ -1531,7 +1531,9 @@ div#calendar-container {
#calendar_merge{
font-size: 11px;
}
#calendar-sidebox_date .calendar_calHoliday a {
background-color: @egw_color_2_e;
}
// Owner
#uical_select_owner {margin: 9px 0 9px;}