timegrid responsible for own bottom HR. separate skeleton from date rendering

src/agenda/AgendaView.js

@@ -18,9 +18,6 @@ var AgendaView = FC.AgendaView = View.extend({
 
 	headContainerEl: null, // div that hold's the timeGrid's rendered date header
 
-	// when the time-grid isn't tall enough to occupy the given height, we render an <hr> underneath
-	bottomRuleEl: null,
-
 	// indicates that minTime/maxTime affects rendering
 	usesMinMaxTime: true,
 
@@ -78,10 +75,6 @@ var AgendaView = FC.AgendaView = View.extend({
 
 		this.timeGrid.setElement(timeGridEl);
 
-		// the <hr> that sometimes displays under the time-grid
-		this.bottomRuleEl = $('<hr class="fc-divider ' + this.calendar.theme.getClass('widgetHeader') + '"/>')
-			.appendTo(this.timeGrid.el); // inject it into the time-grid
-
 		if (this.dayGrid) {
 			this.dayGrid.setElement(this.el.find('.fc-day-grid'));
 
@@ -180,7 +173,7 @@ var AgendaView = FC.AgendaView = View.extend({
 		var scrollbarWidths;
 
 		// reset all dimensions back to the original state
-		this.bottomRuleEl.hide(); // .show() will be called later if this <hr> is necessary
+		this.timeGrid.bottomRuleEl.hide(); // .show() will be called later if this <hr> is necessary
 		this.scroller.clear(); // sets height to 'auto' and clears overflow
 		uncompensateScroll(noScrollRowEls);
 
@@ -220,7 +213,7 @@ var AgendaView = FC.AgendaView = View.extend({
 			// if there's any space below the slats, show the horizontal rule.
 			// this won't cause any new overflow, because lockOverflow already called.
 			if (this.timeGrid.getTotalSlatHeight() < scrollerHeight) {
-				this.bottomRuleEl.show();
+				this.timeGrid.bottomRuleEl.show();
 			}
 		}
 	},

src/agenda/TimeGrid.js

@@ -28,6 +28,7 @@ var TimeGrid = FC.TimeGrid = InteractiveDateComponent.extend(StandardInteraction
 	colCoordCache: null,
 	slatCoordCache: null,
 
+	bottomRuleEl: null, // hidden by default
 	colContainerEls: null, // containers for each column
 
 	// inner-containers for each column where different types of segs live
@@ -178,10 +179,36 @@ var TimeGrid = FC.TimeGrid = InteractiveDateComponent.extend(StandardInteraction
 	------------------------------------------------------------------------------------------------------------------*/
 
 
+	renderSkeleton: function() {
+		var theme = this.view.calendar.theme;
+
+		this.el.html(
+			'<div class="fc-bg"></div>' +
+			'<div class="fc-slats"></div>' +
+			'<hr class="fc-divider ' + theme.getClass('widgetHeader') + '" style="display:none" />'
+		);
+
+		this.bottomRuleEl = this.el.find('hr');
+	},
+
+
 	// Renders the time grid into `this.el`, which should already be assigned.
 	// Relies on the view's colCnt. In the future, this component should probably be self-sufficient.
 	renderDates: function(dateProfile) {
-		this.el.html(this.renderHtml());
+		var theme = this.view.calendar.theme;
+
+		this.el.find('> .fc-bg').html(
+			'<table class="' + theme.getClass('tableGrid') + '">' +
+				this.renderBgTrHtml(0) + // row=0
+			'</table>'
+		);
+
+		this.el.find('> .fc-slats').html(
+			'<table class="' + theme.getClass('tableGrid') + '">' +
+				this.renderSlatRowHtml() +
+			'</table>'
+		);
+
 		this.colEls = this.el.find('.fc-day, .fc-disabled-day');
 		this.slatContainerEl = this.el.find('.fc-slats');
 		this.slatEls = this.slatContainerEl.find('tr');
@@ -199,24 +226,6 @@ var TimeGrid = FC.TimeGrid = InteractiveDateComponent.extend(StandardInteraction
 	},
 
 
-	// Renders the basic HTML skeleton for the grid
-	renderHtml: function() {
-		var theme = this.view.calendar.theme;
-
-		return '' +
-			'<div class="fc-bg">' +
-				'<table class="' + theme.getClass('tableGrid') + '">' +
-					this.renderBgTrHtml(0) + // row=0
-				'</table>' +
-			'</div>' +
-			'<div class="fc-slats">' +
-				'<table class="' + theme.getClass('tableGrid') + '">' +
-					this.renderSlatRowHtml() +
-				'</table>' +
-			'</div>';
-	},
-
-
 	// Generates the HTML for the horizontal "slats" that run width-wise. Has a time axis on a side. Depends on RTL.
 	renderSlatRowHtml: function() {
 		var view = this.view;