new technique for stacking events (issue 111)
This commit is contained in:
Adam Shaw
parent
64b84cc385
commit
6931c875e7
5 changed files with 121 additions and 42 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
73
tests/stacking.html
Normal 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>
|
||||
Loading…
Add table
Reference in a new issue