瀏覽代碼

daygrid/timegrid responsible for rendering own header

Adam Shaw 8 年之前
父節點
當前提交
942af4ee3e
共有 4 個文件被更改,包括 15 次插入35 次删除
  1. 1 16
      src/agenda/AgendaView.js
  2. 5 0
      src/agenda/TimeGrid.js
  3. 4 19
      src/basic/BasicView.js
  4. 5 0
      src/basic/DayGrid.js

+ 1 - 16
src/agenda/AgendaView.js

@@ -18,8 +18,6 @@ var AgendaView = FC.AgendaView = View.extend({
 
 
 	axisWidth: null, // the width of the time axis running down the side
 	axisWidth: null, // the width of the time axis running down the side
 
 
-	headContainerEl: null, // div that hold's the timeGrid's rendered date header
-
 	// indicates that minTime/maxTime affects rendering
 	// indicates that minTime/maxTime affects rendering
 	usesMinMaxTime: true,
 	usesMinMaxTime: true,
 
 
@@ -75,6 +73,7 @@ var AgendaView = FC.AgendaView = View.extend({
 
 
 		this.el.find('.fc-body > tr > td').append(timeGridWrapEl);
 		this.el.find('.fc-body > tr > td').append(timeGridWrapEl);
 
 
+		this.timeGrid.headContainerEl = this.el.find('.fc-head-container');
 		this.timeGrid.setElement(timeGridEl);
 		this.timeGrid.setElement(timeGridEl);
 
 
 		if (this.dayGrid) {
 		if (this.dayGrid) {
@@ -97,20 +96,6 @@ var AgendaView = FC.AgendaView = View.extend({
 	},
 	},
 
 
 
 
-	// Renders the view into `this.el`, which has already been assigned
-	renderDates: function(dateProfile) {
-		this.renderHead();
-	},
-
-
-	// render the day-of-week headers
-	renderHead: function() {
-		this.headContainerEl =
-			this.el.find('.fc-head-container')
-				.html(this.timeGrid.renderHeadHtml());
-	},
-
-
 	// Builds the HTML skeleton for the view.
 	// Builds the HTML skeleton for the view.
 	// The day-grid and time-grid components will render inside containers defined by this HTML.
 	// The day-grid and time-grid components will render inside containers defined by this HTML.
 	renderSkeletonHtml: function() {
 	renderSkeletonHtml: function() {

+ 5 - 0
src/agenda/TimeGrid.js

@@ -20,6 +20,7 @@ var TimeGrid = FC.TimeGrid = InteractiveDateComponent.extend(StandardInteraction
 	labelFormat: null, // formatting string for times running along vertical axis
 	labelFormat: null, // formatting string for times running along vertical axis
 	labelInterval: null, // duration of how often a label should be displayed for a slot
 	labelInterval: null, // duration of how often a label should be displayed for a slot
 
 
+	headContainerEl: null, // div that hold's the date header
 	colEls: null, // cells elements in the day-row background
 	colEls: null, // cells elements in the day-row background
 	slatContainerEl: null, // div that wraps all the slat rows
 	slatContainerEl: null, // div that wraps all the slat rows
 	slatEls: null, // elements running horizontally across all columns
 	slatEls: null, // elements running horizontally across all columns
@@ -249,6 +250,10 @@ var TimeGrid = FC.TimeGrid = InteractiveDateComponent.extend(StandardInteraction
 			);
 			);
 		});
 		});
 
 
+		if (this.headContainerEl) {
+			this.headContainerEl.html(this.renderHeadHtml());
+		}
+
 		this.el.find('> .fc-bg').html(
 		this.el.find('> .fc-bg').html(
 			'<table class="' + theme.getClass('tableGrid') + '">' +
 			'<table class="' + theme.getClass('tableGrid') + '">' +
 				this.renderBgTrHtml(0) + // row=0
 				this.renderBgTrHtml(0) + // row=0

+ 4 - 19
src/basic/BasicView.js

@@ -13,9 +13,6 @@ var BasicView = FC.BasicView = View.extend({
 
 
 	weekNumberWidth: null, // width of all the week-number cells running down the side
 	weekNumberWidth: null, // width of all the week-number cells running down the side
 
 
-	headContainerEl: null, // div that hold's the dayGrid's rendered date header
-	headRowEl: null, // the fake row element of the day-of-week header
-
 
 
 	constructor: function() {
 	constructor: function() {
 		View.apply(this, arguments);
 		View.apply(this, arguments);
@@ -85,7 +82,6 @@ var BasicView = FC.BasicView = View.extend({
 		var dayGridEl;
 		var dayGridEl;
 
 
 		this.el.addClass('fc-basic-view').html(this.renderSkeletonHtml());
 		this.el.addClass('fc-basic-view').html(this.renderSkeletonHtml());
-		this.headContainerEl = this.el.find('.fc-head-container');
 
 
 		this.scroller.render();
 		this.scroller.render();
 
 
@@ -94,6 +90,7 @@ var BasicView = FC.BasicView = View.extend({
 
 
 		this.el.find('.fc-body > tr > td').append(dayGridContainerEl);
 		this.el.find('.fc-body > tr > td').append(dayGridContainerEl);
 
 
+		this.dayGrid.headContainerEl = this.el.find('.fc-head-container');
 		this.dayGrid.setElement(dayGridEl);
 		this.dayGrid.setElement(dayGridEl);
 	},
 	},
 
 
@@ -104,19 +101,6 @@ var BasicView = FC.BasicView = View.extend({
 	},
 	},
 
 
 
 
-	// Renders the view into `this.el`, which should already be assigned
-	renderDates: function(dateProfile) {
-		this.renderHead();
-	},
-
-
-	// render the day-of-week headers
-	renderHead: function() {
-		this.headContainerEl.html(this.dayGrid.renderHeadHtml());
-		this.headRowEl = this.headContainerEl.find('.fc-row');
-	},
-
-
 	// Builds the HTML skeleton for the view.
 	// Builds the HTML skeleton for the view.
 	// The day-grid component will render inside of a container defined by this HTML.
 	// The day-grid component will render inside of a container defined by this HTML.
 	renderSkeletonHtml: function() {
 	renderSkeletonHtml: function() {
@@ -162,6 +146,7 @@ var BasicView = FC.BasicView = View.extend({
 	// Refreshes the horizontal dimensions of the view
 	// Refreshes the horizontal dimensions of the view
 	updateSize: function(totalHeight, isAuto, isResize) {
 	updateSize: function(totalHeight, isAuto, isResize) {
 		var eventLimit = this.opt('eventLimit');
 		var eventLimit = this.opt('eventLimit');
+		var headRowEl = this.dayGrid.headContainerEl.find('.fc-row')
 		var scrollerHeight;
 		var scrollerHeight;
 		var scrollbarWidths;
 		var scrollbarWidths;
 
 
@@ -185,7 +170,7 @@ var BasicView = FC.BasicView = View.extend({
 
 
 		// reset all heights to be natural
 		// reset all heights to be natural
 		this.scroller.clear();
 		this.scroller.clear();
-		uncompensateScroll(this.headRowEl);
+		uncompensateScroll(headRowEl);
 
 
 		this.dayGrid.removeSegPopover(); // kill the "more" popover if displayed
 		this.dayGrid.removeSegPopover(); // kill the "more" popover if displayed
 
 
@@ -211,7 +196,7 @@ var BasicView = FC.BasicView = View.extend({
 
 
 			if (scrollbarWidths.left || scrollbarWidths.right) { // using scrollbars?
 			if (scrollbarWidths.left || scrollbarWidths.right) { // using scrollbars?
 
 
-				compensateScroll(this.headRowEl, scrollbarWidths);
+				compensateScroll(headRowEl, scrollbarWidths);
 
 
 				// doing the scrollbar compensation might have created text overflow which created more height. redo
 				// doing the scrollbar compensation might have created text overflow which created more height. redo
 				scrollerHeight = this.computeScrollerHeight(totalHeight);
 				scrollerHeight = this.computeScrollerHeight(totalHeight);

+ 5 - 0
src/basic/DayGrid.js

@@ -16,6 +16,7 @@ var DayGrid = FC.DayGrid = InteractiveDateComponent.extend(StandardInteractionsM
 
 
 	bottomCoordPadding: 0, // hack for extending the hit area for the last row of the coordinate grid
 	bottomCoordPadding: 0, // hack for extending the hit area for the last row of the coordinate grid
 
 
+	headContainerEl: null, // div that hold's the date header
 	rowEls: null, // set of fake row elements
 	rowEls: null, // set of fake row elements
 	cellEls: null, // set of whole-day elements comprising the row's background
 	cellEls: null, // set of whole-day elements comprising the row's background
 
 
@@ -74,6 +75,10 @@ var DayGrid = FC.DayGrid = InteractiveDateComponent.extend(StandardInteractionsM
 		var row;
 		var row;
 		var col;
 		var col;
 
 
+		if (this.headContainerEl) {
+			this.headContainerEl.html(this.renderHeadHtml());
+		}
+
 		for (row = 0; row < rowCnt; row++) {
 		for (row = 0; row < rowCnt; row++) {
 			html += this.renderDayRowHtml(row, this.isRigid);
 			html += this.renderDayRowHtml(row, this.isRigid);
 		}
 		}