Calendar - make day header blue and always show user name in day view

calendar/js/et2_widget_daycol.js

@@ -69,6 +69,7 @@ var et2_calendar_daycol = (function(){ "use strict"; return et2_valueWidget.exte
 			.css('width',this.options.width)
 			.css('left', this.options.left);
 		this.title = jQuery(document.createElement('div'))
+			.addClass('et2_clickable et2_link')
 			.appendTo(this.header);
 		this.user_spacer = jQuery(document.createElement('div'))
 			.addClass("calendar_calDayColHeader_spacer")
@@ -245,7 +246,8 @@ var et2_calendar_daycol = (function(){ "use strict"; return et2_valueWidget.exte
 				jQuery.datepicker.formatDate('d',formatDate));
 		}
 		this.title
-			.attr("data-date", new_date);
+			.attr("data-date", new_date)
+			.toggleClass('et2_label', !!this.options.label);
 		this.header
 			.attr('data-date',new_date)
 			.attr('data-whole_day',true);

calendar/js/et2_widget_timegrid.js

@@ -944,6 +944,7 @@ var et2_calendar_timegrid = (function(){ "use strict"; return et2_calendar_view.
 
 			// Position
 			day.set_left((day_width * i) + 'px');
+			day.title.removeClass('blue_title');
 			if(this.daily_owner)
 			{
 				// Each 'day' is the same date, different user
@@ -951,11 +952,21 @@ var et2_calendar_timegrid = (function(){ "use strict"; return et2_calendar_view.
 				day.set_date(this.day_list[0], false);
 				day.set_owner(this.options.owner[i]);
 				day.set_label(this._get_owner_name(this.options.owner[i]));
+				day.title.addClass('blue_title');
 			}
 			else
 			{
-				// Go back to self-calculated date by clearing the label
+				// Show user name in day header even if only one
-				day.set_label('');
+				if(this.day_list.length === 1)
+				{
+					day.set_label(this._get_owner_name(this.options.owner));
+					day.title.addClass('blue_title');
+				}
+				else
+				{
+					// Go back to self-calculated date by clearing the label
+					day.set_label('');
+				}
 				day.set_id(this.day_list[i]);
 				day.set_date(this.day_list[i], this.value[this.day_list[i]] || false);
 				day.set_owner(this.options.owner);

calendar/templates/default/app.css

@@ -242,8 +242,10 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /* marks a day in the colum-header as today
  */
 .calendar_calToday,
+.calendar_calTimeGrid .calendar_calDayColHeader .calendar_calToday,
 .calendar_calTimeGrid .calendar_calDayColHeader .calendar_calToday.et2_link.et2_clickable {
 	background: #ffffcc;
+	color: #0C5DA5;
 }
 .calendar_calWeek{
 	background: #ffffcc;
@@ -457,14 +459,18 @@ Hide subsequent headers in week view with non-consolidated owners
 	border-bottom: 1px solid silver;
 	white-space: nowrap;
 	overflow: hidden;
-	background-color: white;
+	color: white;
+	background: #2D6393;
 }
 .hideDayColHeader .calendar_calDayColHeader > div[data-date] {
 	position:fixed;
-    background: white;
     width: inherit;
 	z-index: 100;
 }
+.blue_title {
+    color: white;
+    background: #2D6393;
+}
 
 /* Seperate long and short day names */
 .calendar_calDayColHeader > div[data-date] .short_date,

calendar/templates/pixelegg/app.css

@@ -458,7 +458,6 @@ Hide subsequent headers in week view with non-consolidated owners
   border-bottom: 1px solid silver;
   white-space: nowrap;
   overflow: hidden;
-  background-color: white;
 }
 .hideDayColHeader .calendar_calDayColHeader > div[data-date] {
   position: fixed;
@@ -466,6 +465,10 @@ Hide subsequent headers in week view with non-consolidated owners
   width: inherit;
   z-index: 100;
 }
+.blue_title {
+    color: white;
+    background: #2D6393;
+}
 /* Seperate long and short day names */
 .calendar_calDayColHeader > div[data-date] .short_date,
 .calendar_calDayColHeader > div[data-date] .long_date {
@@ -2015,8 +2018,10 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /* marks a day in the colum-header as today
 */
 .calendar_calToday,
+.calendar_calTimeGrid .calendar_calDayColHeader .calendar_calToday,
 .calendar_calTimeGrid .calendar_calDayColHeader .calendar_calToday.et2_link.et2_clickable {
   background-color: #FFDD73;
+  color: #0C5DA5;
 }
 .calendar_calWeek {
   background-color: #FFFFFF;