deac/fullcalendar
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

added height/contentHeight options and setters

Browse source
This commit is contained in:
Adam Shaw 2009-11-29 00:12:36 -08:00
parent dbdbafd35d
commit e457d4e1dd
6 changed files with 195 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/agenda.js
View file

@ -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
}
}

21
src/grid.js
View file

@ -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;

68
src/main.js
View file

@ -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'>&nbsp;</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
View file

@ -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
View 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>

4
tests/options.html
View file

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