Change regular (grid view) event styling

calendar/js/et2_widget_daycol.js

@@ -804,13 +804,12 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 		{
 			// Calculate horizontal positioning
 			var left = Math.ceil(5 + (1.5 * 100 / (parseFloat(this.options.width) || 100)));
-			var width = 98 - left;
+			var right = 2;
 			if (columns.length !== 1)
 			{
-				width = !c ? 70 : 50;
+				right = !c ? 30 : 2;
 				left += c * (100.0-left) / columns.length;
 			}
-			if (left + width > 100.0) width = 98.0 - left;
 
 			for(var i = 0; (columns[c].indexOf(event) >= 0 || !event) && i < columns[c].length; i++)
 			{
@@ -827,7 +826,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 					columns[c][i].div.css('top', '');
 					columns[c][i].div.css('height', '');
 					columns[c][i].div.css('left', '');
-					columns[c][i].div.css('width', '');
+					columns[c][i].div.css('right', '');
 					// Strip out of view padding
 					columns[c][i].body.css('padding-top','');
 					continue;
@@ -839,7 +838,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 						columns[c][i].div.css('top', '');
 						columns[c][i].div.css('height','');
 						columns[c][i].div.css('left', '');
-						columns[c][i].div.css('width', '');
+						columns[c][i].div.css('right', '');
 						columns[c][i].body.css('padding-top','');
 						columns[c][i].div
 							.appendTo(this.all_day);
@@ -872,7 +871,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 					// This gives the wrong height
 					//columns[c][i].div.outerHeight(height+'%');
 					columns[c][i].div.css('left', left.toFixed(1)+'%');
-					columns[c][i].div.css('width', width.toFixed(1)+'%');
+					columns[c][i].div.css('right', right.toFixed(1)+'%');
 					columns[c][i].div.css('z-index',parseInt(20)+c);
 
 				}

calendar/js/et2_widget_event.js

@@ -312,11 +312,6 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
 		{
 			// Most statuses use colored borders
 			this.div.css('border-color',status_class === 'calendar_calEventAllAccepted' ? this.div.css('background-color') : '');
-
-			// Set title color based on background brightness
-			this.title
-				.css('background-color', this.div.css('background-color'))
-				.css('color', jQuery.Color(this.div.css('background-color')).lightness() > 0.45 ? 'black':'white');
 		}
 
 		this.icons.appendTo(this.title)
@@ -345,11 +340,6 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
 				.append('<span class="calendar_calTimespan">'+start_time + '</span>')
 				.append('<p>'+this.options.value.description+'</p>');
 		}
-		this.body
-			// Set background color to a lighter version of the header color
-			.css('background-color',jQuery.Color(this.title.css('background-color')).lightness(
-				Math.max(0.8, parseFloat(jQuery.Color(this.title.css('background-color')).lightness()))
-			));
 	},
 
 	/**
@@ -420,12 +410,11 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
 		}
 		
 		return '<div class="calendar_calEventTooltip ' + this._status_class() + '" style="border-color: '+border+'; background: '+bg_color+';">'+
-			'<div class="calendar_calEventHeaderSmall" style="background-color: '+this.title.css('background-color')+';">'+
+			'<div class="calendar_calEventHeaderSmall">'+
 				'<font style="color:'+header_color+'">'+timespan+'</font>'+
 				this.icons[0].outerHTML+
 			'</div>'+
-			'<div class="calendar_calEventBodySmall" style="background-color: '+
+			'<div class="calendar_calEventBody">'+
-				jQuery.Color(this.title.css('background-color')).lightness("0.9") + '">'+
 				'<p style="margin: 0px;">'+
 				'<span class="calendar_calEventTitle">'+this.div.attr('data-title')+'</span><br>'+
 				this.options.value.description+'</p>'+

calendar/templates/default/app.css

@@ -443,19 +443,15 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 
 /* contains one event: header-row & -body
  */
-.calendar_calEvent,.calendar_calEventPrivate{
+.calendar_calEvent {
 	position: absolute;
 	left: 0px;
 	right: 0px;
 	overflow: hidden;
 	z-index: 20;
-	border-width: 1px;
+	padding-left: 6px;
-	border-radius: 6px;
-	border-style: solid;
 	min-height: 1.2em;
 	min-width: 5px;
-	-moz-border-radius: 6px;
-	-webkit-border-radius: 6px;
 	/* It is important there are no CSS transitions, it breaks resize */
 	-webkit-transition:none;
 	-moz-transition: none !important;
@@ -471,6 +467,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  *
  */
 	border-color: #808080;
+	background-color: #808080;
 }
 
 .calendar_calEvent:hover{
@@ -530,6 +527,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	white-space: nowrap;
 }
 .calendar_calEventTooltip{
+	padding-left: 6px;
 	border-radius: 6px;
 	-moz-border-radius: 6px;
 	-webkit-border-radius: 6px;
@@ -540,6 +538,9 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 .calendar_calEventTooltip .calendar_calEventBodySmall {
 	padding-bottom: 1em;
 }
+.calendar_calEventTooltip img {
+	max-width: 1.5em;
+}
 
 .calendar_calAddEvent{
 	width: 100%;
@@ -566,7 +567,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  *  background-color: depending on category
  *	color: white || black depending on cat;
  */
-	background-color: #808080;
+	background-color: rgba(255,255,255,0.9);
 }
 .calendar_calEventHeaderSmall{
 	font-size: 8pt;
@@ -591,20 +592,8 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	left: 2px;
 	right: 2px;
 	height: 99%;
-
 	white-space: normal;
-
+	background-color: rgba(255,255,255,0.9);
-	/* Gradient */
-	background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.85) 60%);
-	background-image: -moz-linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.85) 60%);
-	background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.85) 60%);
-	background-position: 50% 50%;
-	-webkit-background-origin: padding-box;
-	background-origin: padding-box;
-	-webkit-background-clip: border-box;
-	background-clip: border-box;
-	-webkit-background-size: auto auto;
-	background-size: auto auto;
 }
 .calendar_calEventBody > p, .calendar_calEventBodySmall > p {
 	white-space: pre-wrap;

calendar/templates/pixelegg/app.css

@@ -784,9 +784,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 .calendar_calEvent,
 .calendar_calEventPrivate {
   border-width: 1px;
-  border-radius: 6px;
-  -moz-border-radius: 6px;
-  -webkit-border-radius: 6px;
   /* set via inline style on runtime:
      *  top: depending on startime
      *  height: depending on length

calendar/templates/pixelegg/app.less

@@ -911,9 +911,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  */
 .calendar_calEvent,.calendar_calEventPrivate{
     border-width: 1px;
-    border-radius: 6px;
-    -moz-border-radius: 6px;
-    -webkit-border-radius: 6px;
     /* set via inline style on runtime:
      *  top: depending on startime
      *  height: depending on length