added height/contentHeight options and setters
This commit is contained in:
Adam Shaw
parent
dbdbafd35d
commit
e457d4e1dd
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
19
src/grid.js
19
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),
|
||||
leftTDs = tbody.find('tr td:first-child'),
|
||||
var leftTDs = tbody.find('tr td:first-child'),
|
||||
tbodyHeight = height - thead.height(),
|
||||
rowHeight1, rowHeight2;
|
||||
|
||||
|
|
|
|||
68
src/main.js
68
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) {
|
||||
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("<td><h2 class='fc-header-title'/></td>");
|
||||
tr.append("<td><h2 class='fc-header-title'> </h2></td>");
|
||||
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();
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
32
src/util.js
32
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
|
||||
|
|
|
|||
103
tests/fullheight.html
Normal file
103
tests/fullheight.html
Normal file
|
|
@ -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>
|
||||
|
|
@ -27,7 +27,9 @@
|
|||
|
||||
//aspectRatio: 2,
|
||||
|
||||
weekends: false,
|
||||
//weekends: false,
|
||||
|
||||
height: 500,
|
||||
|
||||
|
||||
header: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue