new technique for stacking events (issue 111)

src/agenda/AgendaEventRenderer.js

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

src/basic/BasicEventRenderer.js

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

src/common/DayEventRenderer.js

@@ -42,14 +42,17 @@ function DayEventRenderer() {
 	function renderDaySegs(segs, modifiedEventId) {
 		var segmentContainer = getDaySegmentContainer();
 		var rowDivs;
-		var rowCnt;
+		var rowCnt = getRowCnt();
-		var i;
+		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++) {
+		for (rowI=0; rowI<rowCnt; rowI++) {
-			top = levelI = levelHeight = 0;
+			levelI = 0;
-			while (i<segCnt && (seg = segs[i]).row == rowI) {
+			colHeights = [];
-				if (seg.level != levelI) {
+			for (j=0; j<colCnt; j++) {
-					top += levelHeight;
+				colHeights[j] = 0;
-					levelHeight = 0;
-					levelI++;
 			}
-				levelHeight = Math.max(levelHeight, seg.outerHeight||0);
+			while (i<segCnt && (seg = segs[i]).row == rowI) {
+				// 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;
+				cols[0] = dayOfWeekCol(seg.end.getDay()-1);
-				right = seg.isStart ? colContentRight(dayOfWeekCol(seg.start.getDay())) : maxLeft;
+				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;
+				cols[0] = dayOfWeekCol(seg.start.getDay());
-				right = seg.isEnd ? colContentRight(dayOfWeekCol(seg.end.getDay()-1)) : maxLeft;
+				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;
 	}

src/common/util.js

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

tests/stacking.html

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