smarter event renderer styling fallbacking

src/agenda/TimeGridEventRenderer.js

@@ -66,7 +66,7 @@ var TimeGridEventRenderer = EventRenderer.extend({
 		var isResizableFromStart = !disableResizing && seg.isStart && view.isEventDefResizableFromStart(eventDef);
 		var isResizableFromEnd = !disableResizing && seg.isEnd && view.isEventDefResizableFromEnd(eventDef);
 		var classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd);
-		var skinCss = cssToStr(this.getSkinCss(seg.footprint));
+		var skinCss = cssToStr(this.getSkinCss(eventDef));
 		var timeText;
 		var fullTimeText; // more verbose time text. for the print stylesheet
 		var startTimeText; // just the start time text

src/basic/DayGridEventRenderer.js

@@ -238,7 +238,7 @@ var DayGridEventRenderer = EventRenderer.extend({
 		var isResizableFromEnd = !disableResizing && isAllDay &&
 			seg.isEnd && view.isEventDefResizableFromEnd(eventDef);
 		var classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd);
-		var skinCss = cssToStr(this.getSkinCss(seg.footprint));
+		var skinCss = cssToStr(this.getSkinCss(eventDef));
 		var timeHtml = '';
 		var timeText;
 		var titleHtml;

src/component/renderers/EventRenderer.js

@@ -146,11 +146,11 @@ var EventRenderer = FC.EventRenderer = Class.extend({
 		if (this.fillRenderer) {
 			this.fillRenderer.renderSegs('bgEvents', segs, {
 				getClasses: function(seg) {
-					return _this.getBgClasses(seg.footprint);
+					return _this.getBgClasses(seg.footprint.eventDef);
 				},
 				getCss: function(seg) {
 					return {
-						'background-color': _this.getBgColor(seg.footprint)
+						'background-color': _this.getBgColor(seg.footprint.eventDef)
 					};
 				},
 				filterEl: function(seg, el) {
@@ -221,7 +221,7 @@ var EventRenderer = FC.EventRenderer = Class.extend({
 			'fc-event',
 			seg.isStart ? 'fc-start' : 'fc-not-start',
 			seg.isEnd ? 'fc-end' : 'fc-not-end'
-		].concat(this.getClasses(seg.footprint));
+		].concat(this.getClasses(seg.footprint.eventDef));
 
 		if (isDraggable) {
 			classes.push('fc-draggable');
@@ -317,82 +317,105 @@ var EventRenderer = FC.EventRenderer = Class.extend({
 	},
 
 
-	getBgClasses: function(eventFootprint) {
-		var classNames = this.getClasses(eventFootprint);
-
+	getBgClasses: function(eventDef) {
+		var classNames = this.getClasses(eventDef);
 		classNames.push('fc-bgevent');
-
 		return classNames;
 	},
 
 
-	getClasses: function(eventFootprint) {
-		var eventDef = eventFootprint.eventDef;
+	getClasses: function(eventDef) {
+		var objs = this.getStylingObjs(eventDef);
+		var i;
+		var classNames = [];
 
-		return [].concat(
-			eventDef.className, // guaranteed to be an array
-			eventDef.source.className
-		);
+		for (i = 0; i < objs.length; i++) {
+			classNames.push.apply( // append
+				classNames,
+				objs[i].eventClassName || objs[i].className || []
+			);
+		}
+
+		return classNames;
 	},
 
 
 	// Utility for generating event skin-related CSS properties
-	getSkinCss: function(eventFootprint) {
+	getSkinCss: function(eventDef) {
 		return {
-			'background-color': this.getBgColor(eventFootprint),
-			'border-color': this.getBorderColor(eventFootprint),
-			color: this.getTextColor(eventFootprint)
+			'background-color': this.getBgColor(eventDef),
+			'border-color': this.getBorderColor(eventDef),
+			color: this.getTextColor(eventDef)
 		};
 	},
 
 
 	// Queries for caller-specified color, then falls back to default
-	getBgColor: function(eventFootprint) {
-		return eventFootprint.eventDef.backgroundColor ||
-			eventFootprint.eventDef.color ||
-			this.getDefaultBgColor(eventFootprint);
-	},
+	getBgColor: function(eventDef) {
+		var objs = this.getStylingObjs(eventDef);
+		var i;
+		var val;
 
+		for (i = 0; i < objs.length && !val; i++) {
+			val = objs[i].eventBackgroundColor || objs[i].eventColor ||
+				objs[i].backgroundColor || objs[i].color;
+		}
 
-	getDefaultBgColor: function(eventFootprint) {
-		var source = eventFootprint.eventDef.source;
+		if (!val) {
+			val = this.opt('eventBackgroundColor') || this.opt('eventColor');
+		}
 
-		return source.backgroundColor ||
-			source.color ||
-			this.opt('eventBackgroundColor') ||
-			this.opt('eventColor');
+		return val;
 	},
 
 
 	// Queries for caller-specified color, then falls back to default
-	getBorderColor: function(eventFootprint) {
-		return eventFootprint.eventDef.borderColor ||
-			eventFootprint.eventDef.color ||
-			this.getDefaultBorderColor(eventFootprint);
-	},
+	getBorderColor: function(eventDef) {
+		var objs = this.getStylingObjs(eventDef);
+		var i;
+		var val;
 
+		for (i = 0; i < objs.length && !val; i++) {
+			val = objs[i].eventBorderColor || objs[i].eventColor ||
+				objs[i].borderColor || objs[i].color;
+		}
 
-	getDefaultBorderColor: function(eventFootprint) {
-		var source = eventFootprint.eventDef.source;
+		if (!val) {
+			val = this.opt('eventBorderColor') || this.opt('eventColor');
+		}
 
-		return source.borderColor ||
-			source.color ||
-			this.opt('eventBorderColor') ||
-			this.opt('eventColor');
+		return val;
 	},
 
 
 	// Queries for caller-specified color, then falls back to default
-	getTextColor: function(eventFootprint) {
-		return eventFootprint.eventDef.textColor ||
-			this.getDefaultTextColor(eventFootprint);
+	getTextColor: function(eventDef) {
+		var objs = this.getStylingObjs(eventDef);
+		var i;
+		var val;
+
+		for (i = 0; i < objs.length && !val; i++) {
+			val = objs[i].eventTextColor ||
+				objs[i].textColor;
+		}
+
+		if (!val) {
+			val = this.opt('eventTextColor');
+		}
+
+		return val;
 	},
 
 
-	getDefaultTextColor: function(eventFootprint) {
-		var source = eventFootprint.eventDef.source;
+	getStylingObjs: function(eventDef) {
+		var objs = this.getFallbackStylingObjs(eventDef);
+		objs.unshift(eventDef);
+		return objs;
+	},
+
 
-		return source.textColor || this.opt('eventTextColor');
+	getFallbackStylingObjs: function(eventDef) {
+		return [ eventDef.source ];
 	},
 
 

src/list/ListView.js

@@ -141,8 +141,8 @@ var ListView = View.extend({
 			var eventDef = eventFootprint.eventDef;
 			var componentFootprint = eventFootprint.componentFootprint;
 			var url = eventDef.url;
-			var classes = [ 'fc-list-item' ].concat(this.getClasses(seg.footprint));
-			var bgColor = this.getBgColor(seg.footprint);
+			var classes = [ 'fc-list-item' ].concat(this.getClasses(eventDef));
+			var bgColor = this.getBgColor(eventDef);
 			var timeHtml;
 
 			if (componentFootprint.isAllDay) {