diff --git a/calendar/js/app.js b/calendar/js/app.js
index c1470f72ff..62706fa94d 100644
--- a/calendar/js/app.js
+++ b/calendar/js/app.js
@@ -3107,6 +3107,21 @@ app.classes.calendar = AppJS.extend(
{
var datepicker = date_widget.input_date.datepicker("option", {
showButtonPanel: false,
+ onChangeMonthYear: function(year, month, inst)
+ {
+ // Update month button label
+ var go_button = date_widget.getRoot().getWidgetById('header_go');
+ if(go_button)
+ {
+ var temp_date = new Date(year, month-1, 1,0,0,0);
+ //temp_date.setUTCMinutes(temp_date.getUTCMinutes() + temp_date.getTimezoneOffset());
+ go_button.set_statustext(egw.lang(date('F',temp_date)));
+
+ // Store current _displayed_ date in date button for clicking
+ temp_date.setUTCMinutes(temp_date.getUTCMinutes() - temp_date.getTimezoneOffset());
+ go_button.btn.attr('data-date', temp_date.toJSON());
+ }
+ },
// Mark holidays
beforeShowDay: function (date)
{
@@ -3175,27 +3190,49 @@ app.classes.calendar = AppJS.extend(
app.calendar.update_state({date: date});
}
});
-
+
+
+ // Set today button
+ var today = $j('#calendar-sidebox_header_today');
+
+ // Set go button
+ var go_button = date_widget.getRoot().getWidgetById('header_go');
+ if(go_button && go_button.btn)
+ {
+ go_button = go_button.btn;
+ var temp_date = new Date(date_widget.get_value());
+ temp_date.setUTCDate(1);
+ temp_date.setUTCMinutes(temp_date.getUTCMinutes() + temp_date.getTimezoneOffset());
+
+ // Store current _displayed_ date in date button for clicking
+ temp_date.setUTCMinutes(temp_date.getUTCMinutes() - temp_date.getTimezoneOffset());
+ go_button.attr('data-date', temp_date.toJSON());
+ }
+
// Dynamic resize of sidebox calendar to fill sidebox
var preferred_width = $j('#calendar-sidebox_date .ui-datepicker-inline').outerWidth();
var font_ratio = 12 / parseFloat($j('#calendar-sidebox_date .ui-datepicker-inline').css('font-size'));
- $j(window).on('resize.calendar'+date.dom_id, function() {
+ $j(window).on('resize.calendar'+date_widget.dom_id, function() {
var percent = 1+(($j(date_widget.getDOMNode()).width() - preferred_width) / preferred_width);
percent *= font_ratio;
- $j('#calendar-sidebox_date .ui-datepicker-inline,#calendar-sidebox_header_today')
+ $j('#calendar-sidebox_date .ui-datepicker-inline')
.css('font-size',(percent*100)+'%');
// Position today
var buttons = $j('#calendar-sidebox_date .ui-datepicker-header a');
- var total = 0;
- buttons.each(function() {
- total += $j(this).position().left;
- });
- // Why doesn't this work properly?
- var today = $j('#calendar-sidebox_header_today');
if(today.length)
{
- today.position({my: 'center left', at: 'center right',of: buttons});
- today.css('left',(total/buttons.length));
+ // Why doesn't this work properly?
+ go_button.position({my: 'center left', at: 'center right',of: buttons[0]});
+
+ go_button.css('left', buttons.first().position().left + buttons.first().width());
+
+ var max_width = buttons.last().position().left - (go_button.position().left + go_button.width());
+ today.css({
+ 'left': go_button.position().left + go_button.outerWidth(),
+ 'top': go_button.css('top'),
+ 'max-width': max_width,
+ 'right': buttons.last().outerWidth(true)
+ });
}
}).trigger('resize');
diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css
index d56ec68a90..f4d6298ea8 100644
--- a/calendar/templates/default/app.css
+++ b/calendar/templates/default/app.css
@@ -41,20 +41,52 @@
}
#calendar-sidebox_header_today {
position: absolute;
- width: 2.4em;
height: 1.8em;
z-index: 1;
- text-indent: 3em;
+ text-indent: 125%;
overflow: hidden;
+ text-overflow: ellipsis;
border: none;
- background-size: contain;
+ right: 2em;
+ margin: 1px;
+ margin-top: -5px;
+
+ background-position: center center;
+ background-size: contain;
background-color: transparent;
background-image: url(images/today.png);
background-repeat: no-repeat;
}
+#calendar-sidebox_header_go {
+ position: absolute;
+ width: 13px;
+ height: 13px;
+ top: 0.5em;
+ right: 4.7em;
+ z-index: 1;
+ overflow: hidden;
+ margin: 0px;
+ font-size: 10px;
+ line-height: 50%;
+ text-indent: -1px;
+ color: white;
+ background-color: #d8e7f3;
+ border:none;
+ border-radius: 100%;
+}
+#calendar-sidebox_header_go:hover {
+ background-color: #0c5da5;
+}
+
+#calendar-sidebox_date .ui-datepicker-prev {
+ right: 5em;
+}
#calendar-sidebox_weekend {
/* Special css styling goes here */
}
+#calendar-sidebox_date .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
+ max-width: 10em;
+}
#calendar-sidebox_date td.ui-datepicker-week-col {
cursor: pointer;
}
diff --git a/calendar/templates/default/sidebox.xet b/calendar/templates/default/sidebox.xet
index aa7dbf5f56..417836ccfe 100644
--- a/calendar/templates/default/sidebox.xet
+++ b/calendar/templates/default/sidebox.xet
@@ -21,6 +21,7 @@ var today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDa
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;"/>
+
diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css
index 4d4c1b3eb4..09e8183c03 100755
--- a/calendar/templates/pixelegg/app.css
+++ b/calendar/templates/pixelegg/app.css
@@ -11,7 +11,7 @@
* @package calendar
* @version $Id$
*/
-/* $Id: app.css 54875 2016-01-28 21:35:22Z nathangray $ */
+/* $Id: app.css 54876 2016-01-28 22:08:15Z nathangray $ */
/*Media print classes*/
@media print {
.th td,
@@ -54,20 +54,50 @@
}
#calendar-sidebox_header_today {
position: absolute;
- width: 2.4em;
height: 1.8em;
z-index: 1;
- text-indent: 3em;
+ text-indent: 125%;
overflow: hidden;
+ text-overflow: ellipsis;
border: none;
+ right: 2em;
+ margin: 1px;
+ margin-top: -5px;
+ background-position: center center;
background-size: contain;
background-color: transparent;
background-image: url(images/today.png);
background-repeat: no-repeat;
}
+#calendar-sidebox_header_go {
+ position: absolute;
+ width: 13px;
+ height: 13px;
+ top: 0.5em;
+ right: 4.7em;
+ z-index: 1;
+ overflow: hidden;
+ margin: 0px;
+ font-size: 10px;
+ line-height: 50%;
+ text-indent: -1px;
+ color: white;
+ background-color: #d8e7f3;
+ border: none;
+ border-radius: 100%;
+}
+#calendar-sidebox_header_go:hover {
+ background-color: #0c5da5;
+}
+#calendar-sidebox_date .ui-datepicker-prev {
+ right: 5em;
+}
#calendar-sidebox_weekend {
/* Special css styling goes here */
}
+#calendar-sidebox_date .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
+ max-width: 10em;
+}
#calendar-sidebox_date td.ui-datepicker-week-col {
cursor: pointer;
}
@@ -2477,7 +2507,7 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
}
/* Sidebox calendar */
#calendar-sidebox_date .ui-widget-header {
- background: transparent;
+ background-color: transparent;
}
#calendar-sidebox_date .ui-widget-content,
#calendar-sidebox_date .ui-state-default,
@@ -2489,13 +2519,25 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
#calendar-sidebox_date .ui-datepicker td {
padding: 0px;
}
+#calendar-sidebox_date .ui-datepicker-header .ui-state-hover {
+ background-color: transparent;
+ border: none;
+ top: 2px;
+ box-shadow: none;
+}
#calendar-sidebox_date .ui-datepicker-today {
background-color: #ffc200;
}
-#calendar-sidebox_date .ui-widget-content .ui-state-hover {
+#calendar-sidebox_date .ui-datepicker-calendar .ui-state-hover {
background-color: rgba(103, 159, 210, 0.2);
}
-#calendar-sidebox_header_today {
+#calendar-sidebox_date .ui-datepicker-header .ui-datepicker-next.ui-state-hover {
+ right: 2px;
+}
+#calendar-sidebox_date .ui-datepicker-year {
+ padding-right: 15px !important;
+}
+#calendar-sidebox_date #calendar-sidebox_header_today {
background-image: url(images/today.png);
}
#calendar_cat_id,
diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less
index 713914876f..f29b8505b3 100755
--- a/calendar/templates/pixelegg/app.less
+++ b/calendar/templates/pixelegg/app.less
@@ -1341,7 +1341,7 @@ div#calendar-container {
#calendar-sidebox_date {
.ui-widget-header {
- background: transparent;
+ background-color: transparent;
}
.ui-widget-content, .ui-state-default, #calendar-sidebox_date .ui-state-hover {
border: none;
@@ -1351,15 +1351,27 @@ div#calendar-container {
.ui-datepicker td {
padding: 0px
}
+ .ui-datepicker-header .ui-state-hover {
+ background-color: transparent;
+ border: none;
+ top: 2px;
+ box-shadow: none;
+ }
.ui-datepicker-today {
background-color: @egw_color_1;
}
- .ui-widget-content .ui-state-hover {
+ .ui-datepicker-calendar .ui-state-hover {
background-color: @color_hover_row;
}
-}
-#calendar-sidebox_header_today {
- background-image: url(images/today.png);
+ .ui-datepicker-header .ui-datepicker-next.ui-state-hover {
+ right: 2px;
+ }
+ .ui-datepicker-year {
+ padding-right: 15px !important;
+ }
+ #calendar-sidebox_header_today {
+ background-image: url(images/today.png);
+ }
}
// Select Fields in Sidemenu
#calendar_cat_id,