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("