Merge branch 'get-container-height-option' of https://github.com/caseyjhol/fullcalendar into better-business-hours

src/Calendar.js

@@ -731,9 +731,18 @@ function Calendar_constructor(element, overrides) {
 		if (typeof t.options.contentHeight === 'number') { // exists and not 'auto'
 			suggestedViewHeight = t.options.contentHeight;
 		}
+		else if (typeof t.options.contentHeight === 'function') { // exists and is a function
+			suggestedViewHeight = t.options.contentHeight();
+		}
 		else if (typeof t.options.height === 'number') { // exists and not 'auto'
 			suggestedViewHeight = t.options.height - (header.el ? header.el.outerHeight(true) : 0);
 		}
+		else if (typeof t.options.height === 'function') { // exists and is a function
+			suggestedViewHeight = t.options.height() - (header.el ? header.el.outerHeight(true) : 0);
+		}
+		else if (t.options.height === 'parent') { // set to height of parent element
+			suggestedViewHeight = element.parent().height() - (header.el ? header.el.outerHeight(true) : 0);
+		}
 		else {
 			suggestedViewHeight = Math.round(content.width() / Math.max(t.options.aspectRatio, .5));
 		}

tests/automated/height-and-contentHeight.js

@@ -2,26 +2,40 @@
 
 [ 'height', 'contentHeight' ].forEach(function(heightProp) { describe(heightProp, function() {
 
+	var calendarEl;
 	var options;
 	var heightElm;
 	var asAMethod;
+	var heightPropDescriptions = [
+		{ description: 'as a number', height: 600 },
+		{ description: 'as a function', height: getParentHeight, heightWrapper: true }
+	];
+
+	if (heightProp === 'height') {
+		heightPropDescriptions.push({ description: 'as "parent"', height: 'parent', heightWrapper: true });
+	}
 
 	beforeEach(function() {
 		affix('#cal');
-		$('#cal').width(900);
+		calendarEl = $('#cal');
+		calendarEl.width(900);
 		options = {
 			defaultDate: '2014-08-01'
 		};
 	});
 
+	function getParentHeight() {
+		return calendarEl.parent().height();
+	}
+
 	function init(heightVal) {
 		if (asAMethod) {
-			$('#cal').fullCalendar(options);
-			$('#cal').fullCalendar('option', heightProp, heightVal);
+			calendarEl.fullCalendar(options);
+			calendarEl.fullCalendar('option', heightProp, heightVal);
 		}
 		else {
 			options[heightProp] = heightVal;
-			$('#cal').fullCalendar(options);
+			calendarEl.fullCalendar(options);
 		}
 
 		if (heightProp === 'height') {
@@ -53,182 +67,216 @@
 			asAMethod = bool;
 		});
 
-		describe('when in month view', function() {
-			beforeEach(function() {
-				options.defaultView = 'month';
-			});
-
-			describe('as a number, when there are no events', function() {
-				it('should be the specified height, with no scrollbars', function() {
-					init(600);
-					expect(Math.round(heightElm.outerHeight())).toBe(600);
-					expect('.fc-day-grid-container').not.toHaveScrollbars();
-				});
-			});
-
-			describe('as a number, when there is one tall row of events', function() {
+		describe('for ' + heightProp, function() {
+			describe('when in month view', function() {
 				beforeEach(function() {
-					options.events = repeatClone({ title: 'event', start: '2014-08-04' }, 9);
+					options.defaultView = 'month';
 				});
-				it('should take away height from other rows, but not do scrollbars', function() {
-					init(600);
-					var rows = $('.fc-day-grid .fc-row');
-					var tallRow = rows.eq(1);
-					var shortRows = rows.not(tallRow); // 0, 2, 3, 4, 5
-					var shortHeight = shortRows.eq(0).outerHeight();
-
-					expectHeight(600);
-
-					shortRows.each(function(i, node) {
-						var rowHeight = $(node).outerHeight();
-						var diff = Math.abs(rowHeight - shortHeight);
-						expect(diff).toBeLessThan(10); // all roughly the same
-					});
 
-					expect(tallRow.outerHeight()).toBeGreaterThan(shortHeight * 2); // much taller
-					expect('.fc-day-grid-container').not.toHaveScrollbars();
-				});
-			});
+				heightPropDescriptions.forEach(function(testInfo) {
+					describe(testInfo.description, function() {
+						if (testInfo.heightWrapper) {
+							beforeEach(function() {
+								calendarEl.wrap('<div class="calendar-container" style="height: 600px;" />');
+							});
+						}
 
-			describe('as a number, when there are many tall rows of events', function() {
-				beforeEach(function() {
-					options.events = [].concat(
-						repeatClone({ title: 'event0', start: '2014-07-28' }, 9),
-						repeatClone({ title: 'event1', start: '2014-08-04' }, 9),
-						repeatClone({ title: 'event2', start: '2014-08-11' }, 9),
-						repeatClone({ title: 'event3', start: '2014-08-18' }, 9),
-						repeatClone({ title: 'event4', start: '2014-08-25' }, 9),
-						repeatClone({ title: 'event5', start: '2014-09-01' }, 9)
-					);
-				});
-				it('height is correct and scrollbars show up', function() {
-					init(600);
-					expectHeight(600);
-					expect($('.fc-day-grid-container')).toHaveScrollbars();
-				});
-			});
+						describe('when there are no events', function() {
+							it('should be the specified height, with no scrollbars', function() {
+								init(testInfo.height);
+								expect(Math.round(heightElm.outerHeight())).toBe(600);
+								expect('.fc-day-grid-container').not.toHaveScrollbars();
+							});
+						});
 
-			describe('as "auto", when there are many tall rows of events', function() {
-				beforeEach(function() {
-					options.events = [].concat(
-						repeatClone({ title: 'event0', start: '2014-07-28' }, 9),
-						repeatClone({ title: 'event1', start: '2014-08-04' }, 9),
-						repeatClone({ title: 'event2', start: '2014-08-11' }, 9),
-						repeatClone({ title: 'event3', start: '2014-08-18' }, 9),
-						repeatClone({ title: 'event4', start: '2014-08-25' }, 9),
-						repeatClone({ title: 'event5', start: '2014-09-01' }, 9)
-					);
-				});
-				it('height is really tall and there are no scrollbars', function() {
-					init('auto');
-					expect(heightElm.outerHeight()).toBeGreaterThan(1000); // pretty tall
-					expect($('.fc-day-grid-container')).not.toHaveScrollbars();
-				});
-			});
-		});
+						describe('when there is one tall row of events', function() {
+							beforeEach(function() {
+								options.events = repeatClone({ title: 'event', start: '2014-08-04' }, 9);
+							});
 
-		[ 'basicWeek', 'basicDay' ].forEach(function(viewName) {
-			describe('in ' + viewName + ' view', function() {
-				beforeEach(function() {
-					options.defaultView = viewName;
-				});
+							it('should take away height from other rows, but not do scrollbars', function() {
+								init(testInfo.height);
+								var rows = $('.fc-day-grid .fc-row');
+								var tallRow = rows.eq(1);
+								var shortRows = rows.not(tallRow); // 0, 2, 3, 4, 5
+								var shortHeight = shortRows.eq(0).outerHeight();
 
-				describe('as a number, when there are no events', function() {
-					it('should be the specified height, with no scrollbars', function() {
-						init(600);
-						expectHeight(600);
-						expect('.fc-day-grid-container').not.toHaveScrollbars();
-					});
-				});
+								expectHeight(600);
 
-				describe('as a number, when there are many events', function() {
-					beforeEach(function() {
-						options.events = repeatClone({ title: 'event', start: '2014-08-01' }, 100);
-					});
-					it('should have the correct height, with scrollbars', function() {
-						init(600);
-						expectHeight(600);
-						expect('.fc-day-grid-container').toHaveScrollbars();
+								shortRows.each(function(i, node) {
+									var rowHeight = $(node).outerHeight();
+									var diff = Math.abs(rowHeight - shortHeight);
+									expect(diff).toBeLessThan(10); // all roughly the same
+								});
+
+								expect(tallRow.outerHeight()).toBeGreaterThan(shortHeight * 2); // much taller
+								expect('.fc-day-grid-container').not.toHaveScrollbars();
+							});
+						});
+
+						describe('when there are many tall rows of events', function() {
+							beforeEach(function() {
+								options.events = [].concat(
+									repeatClone({ title: 'event0', start: '2014-07-28' }, 9),
+									repeatClone({ title: 'event1', start: '2014-08-04' }, 9),
+									repeatClone({ title: 'event2', start: '2014-08-11' }, 9),
+									repeatClone({ title: 'event3', start: '2014-08-18' }, 9),
+									repeatClone({ title: 'event4', start: '2014-08-25' }, 9),
+									repeatClone({ title: 'event5', start: '2014-09-01' }, 9)
+								);
+							});
+
+							it('height is correct and scrollbars show up', function() {
+								init(testInfo.height);
+								expectHeight(600);
+								expect($('.fc-day-grid-container')).toHaveScrollbars();
+							});
+						});
 					});
 				});
 
-				describe('as "auto", when there are many events', function() {
+				describe('as "auto", when there are many tall rows of events', function() {
 					beforeEach(function() {
-						options.events = repeatClone({ title: 'event', start: '2014-08-01' }, 100);
+						options.events = [].concat(
+							repeatClone({ title: 'event0', start: '2014-07-28' }, 9),
+							repeatClone({ title: 'event1', start: '2014-08-04' }, 9),
+							repeatClone({ title: 'event2', start: '2014-08-11' }, 9),
+							repeatClone({ title: 'event3', start: '2014-08-18' }, 9),
+							repeatClone({ title: 'event4', start: '2014-08-25' }, 9),
+							repeatClone({ title: 'event5', start: '2014-09-01' }, 9)
+						);
 					});
-					it('should be really tall with no scrollbars', function() {
+					it('height is really tall and there are no scrollbars', function() {
 						init('auto');
 						expect(heightElm.outerHeight()).toBeGreaterThan(1000); // pretty tall
-						expect('.fc-day-grid-container').not.toHaveScrollbars();
+						expect($('.fc-day-grid-container')).not.toHaveScrollbars();
 					});
 				});
 			});
-		});
 
-		[ 'agendaWeek', 'agendaDay' ].forEach(function(viewName) {
-			describe('in ' + viewName + ' view', function() {
-				beforeEach(function() {
-					options.defaultView = viewName;
-				});
+			[ 'basicWeek', 'basicDay' ].forEach(function(viewName) {
+				describe('in ' + viewName + ' view', function() {
+					beforeEach(function() {
+						options.defaultView = viewName;
+					});
 
-				$.each({
-					'with no all-day section': { allDaySlot: false },
-					'with no all-day events': { },
-					'with some all-day events': { events: repeatClone({ title: 'event', start: '2014-08-01' }, 6) }
-				}, function(desc, moreOptions) {
-					describe(desc, function() {
-						beforeEach(function() {
-							$.extend(options, moreOptions);
-						});
+					heightPropDescriptions.forEach(function(testInfo) {
+						describe(testInfo.description, function() {
+							if (testInfo.heightWrapper) {
+								beforeEach(function() {
+									calendarEl.wrap('<div class="calendar-container" style="height: 600px;" />');
+								});
+							}
 
-						describe('as a number, with only a few slots', function() {
-							beforeEach(function() {
-								options.minTime = '06:00:00';
-								options.maxTime = '10:00:00';
+							describe('when there are no events', function() {
+								it('should be the specified height, with no scrollbars', function() {
+									init(testInfo.height);
+									expectHeight(600);
+									expect('.fc-day-grid-container').not.toHaveScrollbars();
+								});
 							});
-							it('should be the correct height, with a horizontal rule to occupy space', function() {
-								init(600);
-								expectHeight(600);
-								expect($('.fc-time-grid > hr')).toBeVisible();
+
+							describe('when there are many events', function() {
+								beforeEach(function() {
+									options.events = repeatClone({ title: 'event', start: '2014-08-01' }, 100);
+								});
+								it('should have the correct height, with scrollbars', function() {
+									init(testInfo.height);
+									expectHeight(600);
+									expect('.fc-day-grid-container').toHaveScrollbars();
+								});
 							});
 						});
+					});
 
-						describe('as a number, with many slots', function() {
-							beforeEach(function() {
-								options.minTime = '00:00:00';
-								options.maxTime = '24:00:00';
-							});
-							it('should be the correct height, with scrollbars and no filler hr', function() {
-								init(600);
-								expectHeight(600);
-								expect($('.fc-time-grid-container')).toHaveScrollbars();
-								expect($('.fc-time-grid > hr')).not.toBeVisible();
-							});
+					describe('as "auto", when there are many events', function() {
+						beforeEach(function() {
+							options.events = repeatClone({ title: 'event', start: '2014-08-01' }, 100);
 						});
+						it('should be really tall with no scrollbars', function() {
+							init('auto');
+							expect(heightElm.outerHeight()).toBeGreaterThan(1000); // pretty tall
+							expect('.fc-day-grid-container').not.toHaveScrollbars();
+						});
+					});
+				});
+			});
 
-						describe('as "auto", with only a few slots', function() {
+			[ 'agendaWeek', 'agendaDay' ].forEach(function(viewName) {
+				describe('in ' + viewName + ' view', function() {
+					beforeEach(function() {
+						options.defaultView = viewName;
+					});
+
+					$.each({
+						'with no all-day section': { allDaySlot: false },
+						'with no all-day events': { },
+						'with some all-day events': { events: repeatClone({ title: 'event', start: '2014-08-01' }, 6) }
+					}, function(desc, moreOptions) {
+						describe(desc, function() {
 							beforeEach(function() {
-								options.minTime = '06:00:00';
-								options.maxTime = '10:00:00';
+								$.extend(options, moreOptions);
 							});
-							it('should be really short with no scrollbars nor horizontal rule', function() {
-								init('auto');
-								expect(heightElm.outerHeight()).toBeLessThan(500); // pretty short
-								expect($('.fc-time-grid-container')).not.toHaveScrollbars();
-								expect($('.fc-time-grid > hr')).not.toBeVisible();
+
+							heightPropDescriptions.forEach(function(testInfo) {
+								describe(testInfo.description, function() {
+									if (testInfo.heightWrapper) {
+										beforeEach(function() {
+											calendarEl.wrap('<div class="calendar-container" style="height: 600px;" />');
+										});
+									}
+
+									describe('with only a few slots', function() {
+										beforeEach(function() {
+											options.minTime = '06:00:00';
+											options.maxTime = '10:00:00';
+										});
+										it('should be the correct height, with a horizontal rule to occupy space', function() {
+											init(testInfo.height);
+											expectHeight(600);
+											expect($('.fc-time-grid > hr')).toBeVisible();
+										});
+									});
+
+									describe('with many slots', function() {
+										beforeEach(function() {
+											options.minTime = '00:00:00';
+											options.maxTime = '24:00:00';
+										});
+										it('should be the correct height, with scrollbars and no filler hr', function() {
+											init(testInfo.height);
+											expectHeight(600);
+											expect($('.fc-time-grid-container')).toHaveScrollbars();
+											expect($('.fc-time-grid > hr')).not.toBeVisible();
+										});
+									});
+								});
 							});
-						});
 
-						describe('as a "auto", with many slots', function() {
-							beforeEach(function() {
-								options.minTime = '00:00:00';
-								options.maxTime = '24:00:00';
+							describe('as "auto", with only a few slots', function() {
+								beforeEach(function() {
+									options.minTime = '06:00:00';
+									options.maxTime = '10:00:00';
+								});
+								it('should be really short with no scrollbars nor horizontal rule', function() {
+									init('auto');
+									expect(heightElm.outerHeight()).toBeLessThan(500); // pretty short
+									expect($('.fc-time-grid-container')).not.toHaveScrollbars();
+									expect($('.fc-time-grid > hr')).not.toBeVisible();
+								});
 							});
-							it('should be really tall with no scrollbars nor horizontal rule', function() {
-								init('auto');
-								expect(heightElm.outerHeight()).toBeGreaterThan(900); // pretty tall
-								expect($('.fc-time-grid-container')).not.toHaveScrollbars();
-								expect($('.fc-time-grid > hr')).not.toBeVisible();
+
+							describe('as a "auto", with many slots', function() {
+								beforeEach(function() {
+									options.minTime = '00:00:00';
+									options.maxTime = '24:00:00';
+								});
+								it('should be really tall with no scrollbars nor horizontal rule', function() {
+									init('auto');
+									expect(heightElm.outerHeight()).toBeGreaterThan(900); // pretty tall
+									expect($('.fc-time-grid-container')).not.toHaveScrollbars();
+									expect($('.fc-time-grid > hr')).not.toBeVisible();
+								});
 							});
 						});
 					});

tests/fullheight.html

@@ -69,7 +69,7 @@
 				}
 			],
 			weekMode: 'liquid',
-			height: calcCalendarHeight()
+			height: calcCalendarHeight
 		});
 		
 		function calcCalendarHeight() {
@@ -78,10 +78,6 @@
 			return h;
 		}
 		
-		$(window).resize(function() {
-			$('#calendar').fullCalendar('option', 'height', calcCalendarHeight());
-		});
-		
 	});
 
 </script>