Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

new technique for stacking events (issue 111)

  • Loading branch information...
commit 6931c875e7491021656cd639726020eb14a9c75f 1 parent 64b84cc
@arshaw arshaw authored
View
16 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)),
- 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;
}
View
19 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,
- 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);
}
View
50 src/common/DayEventRenderer.js
@@ -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;
}
View
5 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;
}
View
73 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>
Please sign in to comment.
Something went wrong with that request. Please try again.