diff --git a/src/agenda.js b/src/agenda.js index 31eba38..f8cfe16 100755 --- a/src/agenda.js +++ b/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 } } diff --git a/src/grid.js b/src/grid.js index d58fbc7..4fcc67b 100755 --- a/src/grid.js +++ b/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() { - - var height = Math.round(element.width() / options.aspectRatio), - leftTDs = tbody.find('tr td:first-child'), + function updateSize(height) { + + var leftTDs = tbody.find('tr td:first-child'), tbodyHeight = height - thead.height(), rowHeight1, rowHeight2; diff --git a/src/main.js b/src/main.js index 774b298..6137696 100755 --- a/src/main.js +++ b/src/main.js @@ -148,7 +148,9 @@ $.fn.fullCalendar = function(options) { // element var _element = this, element = $(this).addClass('fc'), - content = $("
").appendTo(this); // relative for ie6 + elementWidth, + content = $("
").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) { - view.updateSize(); + else if (view.sizeDirty || forceUpdateSize) { + 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 - function eventsChanged() { - view.clearEvents(); - view.renderEvents(events); - eventsDirtyExcept(view); + // called when we know the element size has changed + function sizeChanged(fix) { + contentHeight = calculateContentHeight(); + if (fix) fixContentSize(); + 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("

"); + tr.append("

 

"); if (prevButton) { prevButton.addClass(tm + '-corner-right'); } @@ -662,8 +696,7 @@ $.fn.fullCalendar = function(options) { /* Resizing -----------------------------------------------------------------------------*/ - var elementWidth, - contentSizeFixed = false, + var 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(); - view.updateSize(); - unfixContentSize(); - view.rerenderEvents(true); - sizesDirtyExcept(view); + sizeChanged(true); view.trigger('windowResize', _element); } } @@ -722,7 +751,6 @@ $.fn.fullCalendar = function(options) { // let's begin... changeView(options.defaultView); - elementWidth = element.width(); }); diff --git a/src/util.js b/src/util.js index 8a86486..948791c 100755 --- a/src/util.js +++ b/src/util.js @@ -253,37 +253,41 @@ var dateFormatters = { function setOuterWidth(element, width, includeMargins) { element.each(function() { var e = $(this); - var w = width - ( - (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)); + var w = width - horizontalSides(e); if (includeMargins) { - w -= - (parseInt(e.css('margin-left')) || 0) + + w -= (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 - ( - (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)); + var h = height - verticalSides(e); if (includeMargins) { - h -= - (parseInt(e.css('margin-top')) || 0) + + h -= (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 diff --git a/tests/fullheight.html b/tests/fullheight.html new file mode 100644 index 0000000..fc8984c --- /dev/null +++ b/tests/fullheight.html @@ -0,0 +1,103 @@ + + + + + + + + + +
+ + diff --git a/tests/options.html b/tests/options.html index 593bb16..a968008 100644 --- a/tests/options.html +++ b/tests/options.html @@ -27,7 +27,9 @@ //aspectRatio: 2, - weekends: false, + //weekends: false, + + height: 500, header: {