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

new technique for stacking events (issue 111)

v1.4.x
Adam Shaw 2010-11-14 22:12:31 -08:00
parent 64b84cc385
commit 6931c875e7
5 changed files with 121 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/agenda/AgendaEventRenderer.js
View File

@ -79,18 +79,10 @@ function AgendaEventRenderer() {
function compileDaySegs(events) {
var levels = stackSegs(sliceSegs(events, $.map(events, exclEndDay), t.visStart, t.visEnd)),
i, levelCnt=levels.length, level,
j, seg,
segs=[];
for (i=0; i<levelCnt; i++) {
level = levels[i];
for (j=0; j<level.length; j++) {
seg = level[j];
seg.row = 0;
seg.level = i;
segs.push(seg);
}
var segs = sliceSegs(events, $.map(events, exclEndDay), t.visStart, t.visEnd),
i;
for (i=0; i<segs.length; i++) {
segs[i].row = 0;
}
return segs;
}

19
src/basic/BasicEventRenderer.js
View File

@ -53,21 +53,16 @@ function BasicEventRenderer() {
d1 = cloneDate(t.visStart),
d2 = addDays(cloneDate(d1), colCnt),
visEventsEnds = $.map(events, exclEndDay),
i, row,
j, level,
k, seg,
i,
rowSegs,
j,
segs=[];
for (i=0; i<rowCnt; i++) {
row = stackSegs(sliceSegs(events, visEventsEnds, d1, d2));
for (j=0; j<row.length; j++) {
level = row[j];
for (k=0; k<level.length; k++) {
seg = level[k];
seg.row = i;
seg.level = j;
segs.push(seg);
}
rowSegs = sliceSegs(events, visEventsEnds, d1, d2);
for (j=0; j<rowSegs.length; j++) {
rowSegs[j].row = i;
}
segs = segs.concat(rowSegs);
addDays(d1, 7);
addDays(d2, 7);
}

50
src/common/DayEventRenderer.js
View File

@ -42,14 +42,17 @@ function DayEventRenderer() {
function renderDaySegs(segs, modifiedEventId) {
var segmentContainer = getDaySegmentContainer();
var rowDivs;
var rowCnt;
var i;
var rowCnt = getRowCnt();
var colCnt = getColCnt();
var i = 0;
var rowI;
var top;
var levelI;
var levelHeight;
var colHeights;
var j;
var segCnt = segs.length;
var seg;
var top;
var k;
segmentContainer[0].innerHTML = daySegHTML(segs); // faster than .html()
daySegElementResolve(segs, segmentContainer.children());
daySegElementReport(segs);
@ -58,21 +61,24 @@ function DayEventRenderer() {
daySegSetWidths(segs);
daySegCalcHeights(segs);
rowDivs = getRowDivs();
rowCnt = rowDivs.length;
// set row heights, calculate event tops (in relation to row top)
for (i=0, rowI=0; rowI<rowCnt; rowI++) {
top = levelI = levelHeight = 0;
for (rowI=0; rowI<rowCnt; rowI++) {
levelI = 0;
colHeights = [];
for (j=0; j<colCnt; j++) {
colHeights[j] = 0;
}
while (i<segCnt && (seg = segs[i]).row == rowI) {
if (seg.level != levelI) {
top += levelHeight;
levelHeight = 0;
levelI++;
}
levelHeight = Math.max(levelHeight, seg.outerHeight||0);
// loop through segs in a row
top = arrayMax(colHeights.slice(seg.startCol, seg.endCol));
seg.top = top;
top += seg.outerHeight;
for (k=seg.startCol; k<seg.endCol; k++) {
colHeights[k] = top;
}
i++;
}
rowDivs[rowI].height(top + levelHeight);
rowDivs[rowI].height(arrayMax(colHeights));
}
daySegSetTops(segs, getRowTops(rowDivs));
}
@ -117,6 +123,7 @@ function DayEventRenderer() {
var bounds = allDayBounds();
var minLeft = bounds.left;
var maxLeft = bounds.right;
var cols = []; // don't really like this system (but have to do this b/c RTL works differently in basic vs agenda)
var left;
var right;
var html = '';
@ -132,8 +139,10 @@ function DayEventRenderer() {
if (seg.isEnd) {
className += 'fc-corner-left ';
}
left = seg.isEnd ? colContentLeft(dayOfWeekCol(seg.end.getDay()-1)) : minLeft;
right = seg.isStart ? colContentRight(dayOfWeekCol(seg.start.getDay())) : maxLeft;
cols[0] = dayOfWeekCol(seg.end.getDay()-1);
cols[1] = dayOfWeekCol(seg.start.getDay());
left = seg.isEnd ? colContentLeft(cols[0]) : minLeft;
right = seg.isStart ? colContentRight(cols[1]) : maxLeft;
}else{
if (seg.isStart) {
className += 'fc-corner-left ';
@ -141,8 +150,10 @@ function DayEventRenderer() {
if (seg.isEnd) {
className += 'fc-corner-right ';
}
left = seg.isStart ? colContentLeft(dayOfWeekCol(seg.start.getDay())) : minLeft;
right = seg.isEnd ? colContentRight(dayOfWeekCol(seg.end.getDay()-1)) : maxLeft;
cols[0] = dayOfWeekCol(seg.start.getDay());
cols[1] = dayOfWeekCol(seg.end.getDay()-1);
left = seg.isStart ? colContentLeft(cols[0]) : minLeft;
right = seg.isEnd ? colContentRight(cols[1]) : maxLeft;
}
html +=
"<div class='" + className + event.className.join(' ') + "' style='position:absolute;z-index:8;left:"+left+"px'>" +
@ -160,6 +171,9 @@ function DayEventRenderer() {
"</div>";
seg.left = left;
seg.outerWidth = right - left;
cols.sort(cmp);
seg.startCol = cols[0];
seg.endCol = cols[1] + 1;
}
return html;
}

5
src/common/util.js
View File

@ -232,6 +232,11 @@ function cmp(a, b) {
}
function arrayMax(a) {
return Math.max.apply(Math, a);
}
function zeroPad(n) {
return (n < 10 ? '0' : '') + n;
}

73
tests/stacking.html Normal file
View File

@ -0,0 +1,73 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type='text/javascript' src='../src/_loader.js?debug'></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,
isRTL: false,
year: 2010,
month: 10,
date: 14,
events: [
{
title: 'event1',
start: '2010-11-15',
end: '2010-11-19'
},
{
title: 'event2 with a really long title that wraps',
start: '2010-11-15'
},
{
title: 'event3',
start: '2010-11-17'
},
{
title: 'event4',
start: '2010-11-18',
end: '2010-11-19'
},
{
title: 'event5',
start: '2010-11-18'
}
]
});
});
</script>
<style type='text/css'>
body {
margin-top: 40px;
text-align: center;
font-size: 13px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>