added height/contentHeight options and setters

src/agenda.js

@@ -19,7 +19,7 @@ setDefaults({
 
 views.agendaWeek = function(element, options) {
 	return new Agenda(element, options, {
-		render: function(date, delta, fetchEvents) {
+		render: function(date, delta, height, fetchEvents) {
 			if (delta) {
 				addDays(date, delta * 7);
 			}
@@ -39,14 +39,14 @@ views.agendaWeek = function(element, options) {
 				this.option('titleFormat'),
 				options
 			);
-			this.renderAgenda(options.weekends ? 7 : 5, this.option('columnFormat'), fetchEvents);
+			this.renderAgenda(options.weekends ? 7 : 5, this.option('columnFormat'), height, fetchEvents);
 		}
 	});
 };
 
 views.agendaDay = function(element, options) {
 	return new Agenda(element, options, {
-		render: function(date, delta, fetchEvents) {
+		render: function(date, delta, height, fetchEvents) {
 			if (delta) {
 				addDays(date, delta);
 				if (!options.weekends) {
@@ -56,7 +56,7 @@ views.agendaDay = function(element, options) {
 			this.title = formatDate(date, this.option('titleFormat'), options);
 			this.start = this.visStart = cloneDate(date, true);
 			this.end = this.visEnd = addDays(cloneDate(this.start), 1);
-			this.renderAgenda(1, this.option('columnFormat'), fetchEvents);
+			this.renderAgenda(1, this.option('columnFormat'), height, fetchEvents);
 		}
 	});
 };
@@ -67,6 +67,7 @@ function Agenda(element, options, methods) {
 		colCnt,
 		axisWidth, colWidth, slotHeight,
 		cachedDaySegs, cachedSlotSegs,
+		cachedHeight,
 		tm, firstDay,
 		nwe,            // no weekends (int)
 		rtl, dis, dit,  // day index sign / translate
@@ -114,7 +115,7 @@ function Agenda(element, options, methods) {
 		element.disableSelection();
 	}
 	
-	function renderAgenda(c, colFormat, fetchEvents) {
+	function renderAgenda(c, colFormat, height, fetchEvents) {
 		colCnt = c;
 		
 		// update option-derived variables
@@ -245,7 +246,7 @@ function Agenda(element, options, methods) {
 		
 		}
 		
-		updateSize();
+		updateSize(height);
 		resetScroll();
 		fetchEvents(renderEvents);
 		
@@ -268,10 +269,11 @@ function Agenda(element, options, methods) {
 	}
 	
 	
-	function updateSize() {
+	function updateSize(height) {
+		cachedHeight = height;
 		
 		bodyTable.width('');
-		body.height(Math.round(body.width() / options.aspectRatio) - head.height());
+		body.height(height - head.height());
 		
 		// need this for IE6/7. triggers clientWidth to be calculated for 
 		// later user in this function. this is ridiculous
@@ -303,7 +305,7 @@ function Agenda(element, options, methods) {
 			top: head.find('tr').height(),
 			left: axisWidth,
 			width: contentWidth - axisWidth,
-			height: element.height()
+			height: height
 		});
 		
 		slotHeight = body.find('tr:first div').height() + 1;
@@ -469,7 +471,7 @@ function Agenda(element, options, methods) {
 				rowContentHeight += levelHeight;
 			}
 			tdInner.height(rowContentHeight);
-			updateSize(); // tdInner might have pushed the body down, so resize
+			updateSize(cachedHeight); // tdInner might have pushed the body down, so resize
 		}
 	}
 	

src/grid.js

@@ -8,7 +8,7 @@ setDefaults({
 
 views.month = function(element, options) {
 	return new Grid(element, options, {
-		render: function(date, delta, fetchEvents) {
+		render: function(date, delta, height, fetchEvents) {
 			if (delta) {
 				addMonths(date, delta);
 				date.setDate(1);
@@ -44,6 +44,7 @@ views.month = function(element, options) {
 				rowCnt, options.weekends ? 7 : 5,
 				this.option('columnFormat'),
 				true,
+				height,
 				fetchEvents
 			);
 		}
@@ -52,7 +53,7 @@ views.month = function(element, options) {
 
 views.basicWeek = function(element, options) {
 	return new Grid(element, options, {
-		render: function(date, delta, fetchEvents) {
+		render: function(date, delta, height, fetchEvents) {
 			if (delta) {
 				addDays(date, delta * 7);
 			}
@@ -76,6 +77,7 @@ views.basicWeek = function(element, options) {
 				1, options.weekends ? 7 : 5,
 				this.option('columnFormat'),
 				false,
+				height,
 				fetchEvents
 			);
 		}
@@ -84,7 +86,7 @@ views.basicWeek = function(element, options) {
 
 views.basicDay = function(element, options) {
 	return new Grid(element, options, {
-		render: function(date, delta, fetchEvents) {
+		render: function(date, delta, height, fetchEvents) {
 			if (delta) {
 				addDays(date, delta);
 				if (!options.weekends) {
@@ -94,7 +96,7 @@ views.basicDay = function(element, options) {
 			this.title = formatDate(date, this.option('titleFormat'), options);
 			this.start = this.visStart = cloneDate(date, true);
 			this.end = this.visEnd = addDays(cloneDate(this.start), 1);
-			this.renderGrid(1, 1, this.option('columnFormat'), false, fetchEvents);
+			this.renderGrid(1, 1, this.option('columnFormat'), false, height, fetchEvents);
 		}
 	});
 }
@@ -146,7 +148,7 @@ function Grid(element, options, methods) {
 		element.disableSelection();
 	}
 
-	function renderGrid(r, c, colFormat, showNumbers, fetchEvents) {
+	function renderGrid(r, c, colFormat, showNumbers, height, fetchEvents) {
 		rowCnt = r;
 		colCnt = c;
 		
@@ -294,7 +296,7 @@ function Grid(element, options, methods) {
 		
 		}
 		
-		updateSize();
+		updateSize(height);
 		fetchEvents(renderEvents);
 	
 	};
@@ -310,10 +312,9 @@ function Grid(element, options, methods) {
 	}
 	
 	
-	function updateSize() {
+	function updateSize(height) {
 		
-		var height = Math.round(element.width() / options.aspectRatio),
+		var leftTDs = tbody.find('tr td:first-child'),
-			leftTDs = tbody.find('tr td:first-child'),
 			tbodyHeight = height - thead.height(),
 			rowHeight1, rowHeight2;
 		

src/main.js

@@ -148,7 +148,9 @@ $.fn.fullCalendar = function(options) {
 		// element
 		var _element = this,
 			element = $(this).addClass('fc'),
-			content = $("<div class='fc-content " + tm + "-widget-content' style='position:relative'/>").appendTo(this); // relative for ie6
+			elementWidth,
+			content = $("<div class='fc-content " + tm + "-widget-content' style='position:relative'/>").appendTo(this), // relative for ie6
+			contentHeight;
 		if (options.isRTL) {
 			element.addClass('fc-rtl');
 		}
@@ -210,11 +212,15 @@ $.fn.fullCalendar = function(options) {
 			}
 		}
 		
-		function render(inc, updateSize) {
+		function render(inc, forceUpdateSize) {
 			if (_element.offsetWidth !== 0) { // visible on the screen
+				if (!elementWidth) {
+					elementWidth = element.width();
+					contentHeight = calculateContentHeight();
+				}
 				if (inc || !view.date || +view.date != +date) { // !view.date means it hasn't been rendered yet
 					fixContentSize();
-					view.render(date, inc || 0, function(callback) {
+					view.render(date, inc || 0, contentHeight, function(callback) {
 						// dont refetch if new view contains the same events (or a subset)
 						if (!eventStart || view.visStart < eventStart || view.visEnd > eventEnd) {
 							fetchEvents(callback);
@@ -225,8 +231,8 @@ $.fn.fullCalendar = function(options) {
 					unfixContentSize();
 					view.date = cloneDate(date);
 				}
-				else if (view.sizeDirty || updateSize) {
+				else if (view.sizeDirty || forceUpdateSize) {
-					view.updateSize();
+					view.updateSize(contentHeight);
 					view.rerenderEvents();
 				}
 				else if (view.eventsDirty) {
@@ -261,6 +267,13 @@ $.fn.fullCalendar = function(options) {
 			});
 		}
 		
+		// called when any event objects have been added/removed/changed, rerenders
+		function eventsChanged() {
+			view.clearEvents();
+			view.renderEvents(events);
+			eventsDirtyExcept(view);
+		}
+		
 		// marks other views' sizes as dirty
 		function sizesDirtyExcept(exceptView) {
 			$.each(viewInstances, function() {
@@ -270,11 +283,25 @@ $.fn.fullCalendar = function(options) {
 			});
 		}
 		
-		// called when any event objects have been added/removed/changed, rerenders
+		// called when we know the element size has changed
-		function eventsChanged() {
+		function sizeChanged(fix) {
-			view.clearEvents();
+			contentHeight = calculateContentHeight();
-			view.renderEvents(events);
+			if (fix) fixContentSize();
-			eventsDirtyExcept(view);
+			view.updateSize(contentHeight);
+			if (fix) unfixContentSize();
+			sizesDirtyExcept(view);
+			view.rerenderEvents(true);
+		}
+		
+		// calculate what the height of the content should be
+		function calculateContentHeight() {
+			if (options.contentHeight) {
+				return options.contentHeight;
+			}
+			else if (options.height) {
+				return options.height - (header ? header.height() : 0) - horizontalSides(content);
+			}
+			return elementWidth / options.aspectRatio;
 		}
 		
 		
@@ -376,6 +403,13 @@ $.fn.fullCalendar = function(options) {
 				return view;
 			},
 			
+			option: function(name, value) {
+				if (name == 'height' || name == 'contentHeight' || name == 'aspectRatio') {
+					options[name] = value;
+					sizeChanged();
+				}
+			},
+			
 			//
 			// Navigation
 			//
@@ -578,7 +612,7 @@ $.fn.fullCalendar = function(options) {
 					var prevButton;
 					$.each(this.split(','), function(j, buttonName) {
 						if (buttonName == 'title') {
-							tr.append("<td><h2 class='fc-header-title'/></td>");
+							tr.append("<td><h2 class='fc-header-title'>&nbsp;</h2></td>");
 							if (prevButton) {
 								prevButton.addClass(tm + '-corner-right');
 							}
@@ -662,8 +696,7 @@ $.fn.fullCalendar = function(options) {
 		/* Resizing
 		-----------------------------------------------------------------------------*/
 		
-		var elementWidth,
+		var contentSizeFixed = false,
-			contentSizeFixed = false,
 			resizeCnt = 0;
 		
 		function fixContentSize() {
@@ -671,7 +704,7 @@ $.fn.fullCalendar = function(options) {
 				contentSizeFixed = true;
 				content.css({
 					overflow: 'hidden',
-					height: Math.round(content.width() / options.aspectRatio)
+					height: contentHeight
 				});
 				// TODO: previous action might have caused scrollbars
 				// which will make the window width more narrow, possibly changing the aspect ratio
@@ -703,11 +736,7 @@ $.fn.fullCalendar = function(options) {
 							var newWidth = element.width();
 							if (newWidth != elementWidth) {
 								elementWidth = newWidth;
-								fixContentSize();
+								sizeChanged(true);
-								view.updateSize();
-								unfixContentSize();
-								view.rerenderEvents(true);
-								sizesDirtyExcept(view);
 								view.trigger('windowResize', _element);
 							}
 						}
@@ -722,7 +751,6 @@ $.fn.fullCalendar = function(options) {
 		
 		// let's begin...
 		changeView(options.defaultView);
-		elementWidth = element.width();
 	
 	});
 	

src/util.js

@@ -253,37 +253,41 @@ var dateFormatters = {
 function setOuterWidth(element, width, includeMargins) {
 	element.each(function() {
 		var e = $(this);
-		var w = width - (
+		var w = width - horizontalSides(e);
-			(parseInt(e.css('border-left-width')) || 0) +
-			(parseInt(e.css('padding-left')) || 0) +
-			(parseInt(e.css('padding-right')) || 0) +
-			(parseInt(e.css('border-right-width')) || 0));
 		if (includeMargins) {
-			w -=
+			w -= (parseInt(e.css('margin-left')) || 0) +
-				(parseInt(e.css('margin-left')) || 0) +
 				(parseInt(e.css('margin-right')) || 0);
 		}
 		e.width(w);
 	});
 }
 
+function horizontalSides(e) {
+	return (parseInt(e.css('border-left-width')) || 0) +
+		(parseInt(e.css('padding-left')) || 0) +
+		(parseInt(e.css('padding-right')) || 0) +
+		(parseInt(e.css('border-right-width')) || 0);
+}
+
 function setOuterHeight(element, height, includeMargins) {
 	element.each(function() {
 		var e = $(this);
-		var h = height - (
+		var h = height - verticalSides(e);
-			(parseInt(e.css('border-top-width')) || 0) +
-			(parseInt(e.css('padding-top')) || 0) +
-			(parseInt(e.css('padding-bottom')) || 0) +
-			(parseInt(e.css('border-bottom-width')) || 0));
 		if (includeMargins) {
-			h -=
+			h -= (parseInt(e.css('margin-top')) || 0) +
-				(parseInt(e.css('margin-top')) || 0) +
 				(parseInt(e.css('margin-bottom')) || 0);
 		}
 		e.height(h);
 	});
 }
 
+function verticalSides(e) {
+	return (parseInt(e.css('border-top-width')) || 0) +
+		(parseInt(e.css('padding-top')) || 0) +
+		(parseInt(e.css('padding-bottom')) || 0) +
+		(parseInt(e.css('border-bottom-width')) || 0);
+}
+
 
 
 /* Position Calculation

tests/fullheight.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+<head>
+<link rel='stylesheet' type='text/css' href='../examples/redmond/theme.css' />
+<script type='text/javascript' src='loader.js'></script>
+<script type='text/javascript'>
+
+	$(document).ready(function() {
+	
+		var date = new Date();
+		var d = date.getDate();
+		var m = date.getMonth();
+		var y = date.getFullYear();
+		
+		$('#calendar').fullCalendar({
+			header: {
+				left: 'prev,next today',
+				center: 'title',
+				right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
+			},
+			editable: true,
+			events: [
+				{
+					title: 'All Day Event',
+					start: new Date(y, m, 1)
+				},
+				{
+					title: 'Long Event',
+					start: new Date(y, m, d-5),
+					end: new Date(y, m, d-2)
+				},
+				{
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d-3, 16, 0),
+					allDay: false
+				},
+				{
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d+4, 16, 0),
+					allDay: false
+				},
+				{
+					title: 'Meeting',
+					start: new Date(y, m, d, 10, 30),
+					allDay: false
+				},
+				{
+					title: 'Lunch',
+					start: new Date(y, m, d, 12, 5),
+					end: new Date(y, m, d, 14, 43),
+					allDay: false
+				},
+				{
+					title: 'Birthday Party',
+					start: new Date(y, m, d+1, 19, 0),
+					end: new Date(y, m, d+1, 22, 30),
+					allDay: false
+				},
+				{
+					title: 'Click for Google',
+					start: new Date(y, m, 28),
+					end: new Date(y, m, 29),
+					url: 'http://google.com/'
+				}
+			],
+			weekMode: 'liquid',
+			height: calcCalendarHeight()
+		});
+		
+		function calcCalendarHeight() {
+			var h = $(window).height() - 40;
+			console.log(h);
+			return h;
+		}
+		
+		$(window).resize(function() {
+			$('#calendar').fullCalendar('option', 'height', calcCalendarHeight());
+		});
+		
+	});
+
+</script>
+<style type='text/css'>
+
+	body {
+		margin: 20px 200px 20px 20px;
+		text-align: center;
+		font-size: 13px;
+		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
+		}
+
+	#calendar {
+		width: 100%;
+		}
+
+</style>
+</head>
+<body>
+<div id='calendar'></div>
+</body>
+</html>

tests/options.html

@@ -27,7 +27,9 @@
 			
 			//aspectRatio: 2,
 			
-			weekends: false,
+			//weekends: false,
+			
+			height: 500,
 			
 			
 			header: {