using an array
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.showposts {
position:relative;overflow:auto;width:500px;height:300px;background-Color:#FFFFCC;border:solid red 1px;
}
.day {
position:relative;width:200px;background-Color:#FFFFCC;float:left;border-Right:solid red 1px;
}
.date {
position:relative;width:200px;height:20px;margin-Top:5px;background-Color:#00CC33;text-Align:center;
}
.post {
position:relative;width:180px;height:20px;margin-Top:5px;margin-Left:10px;background-Color:#FFCC66;text-Align:center;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
var array=[
['2012,6,22,08,32','Post 1','http://www.vicsjavascripts.org.uk/'],
['2012,6,21,08,22','Post 1','http://www.vicsjavascripts.org.uk/'],
['2012,6,22,09,22','Post 1','http://www.vicsjavascripts.org.uk/']
]
/*]]>*/
</script>
</head>
<body>
<div id="showposts" class="showposts" >
</div>
<script type="text/javascript">
/*<![CDATA[*/
function zxcTimeLine(o){
var obj=document.getElementById(o.ID),ary=o.TimeLine,s,days=[],div=document.createElement('DIV'),nu=0,d,d1,day,date,post,a,z0=0,z1=1,z2=0,z2a;
var m=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
div.style.width='90000px';
obj.appendChild(div);
for (;z0<ary.length;z0++){
s=ary[z0][0].split(',');
ary[z0][0]=new Date(s[0],s[1]-1,s[2],s[3],s[4],0,0);
}
ary=ary.sort(function(a,b){ return b[0]-a[0]; });
days[0]=[ary[0]];
for (;z1<ary.length;z1++){
d=ary[z1][0];
d1=ary[z1-1][0];
if (d.getFullYear()!=d1.getFullYear()||d.getMonth()!=d1.getMonth()||d.getDate()!=d1.getDate()){
days[++nu]=[];
}
days[nu].push(ary[z1]);
}
for (;z2<days.length;z2++){
day=document.createElement('DIV');
day.className=o.DayClass;
div.appendChild(day);
date=day.cloneNode(false);
date.className=o.DateClass;
d=days[z2][0][0];
date.innerHTML=m[d.getMonth()]+'-'+d.getDate()+'-'+d.getFullYear();
day.appendChild(date);
for (z2a=0;z2a<days[z2].length;z2a++){
post=day.cloneNode(false);
post.className=o.PostClass;
a=document.createElement('A');
a.href=days[z2][z2a][2];
d=days[z2][z2a][0];
a.innerHTML=days[z2][z2a][1]+' ('+d.getHours()+':'+d.getMinutes()+')';
post.appendChild(a);
day.appendChild(post);
}
}
div.style.width=day.offsetLeft+day.offsetWidth+5+'px';
}
zxcTimeLine({
ID:'showposts',
DayClass:'day',
DateClass:'date',
PostClass:'post',
TimeLine:[
['2012,6,22,08,32','Post 1','http://www.vicsjavascripts.org.uk/'],
['2012,6,21,08,22','Post 2','http://www.vicsjavascripts.org.uk/'],
['2012,6,20,08,22','Post 2','http://www.vicsjavascripts.org.uk/'],
['2012,6,22,09,22','Post 3','http://www.vicsjavascripts.org.uk/']
]
});
/*]]>*/
</script>
</div>
</body>
</html>
