Need help with changing width of DIV based on columns

I am trying to write an appointment program with a day view. Sometimes there are multiple appointments that span the same hour. I am able to create the calendar and place the appointment entries at the appropriate hour.

My problem is that I am stumped on how to have Javascript figure out the width of the entry when there are multiple appointments.

The best example I have is from a screenshot of Apple's web-based iCloud calendar. I've tried to understand their code (snippet below) but still can't figure out logic behind how to get something like this to work. Any help would be very much appreciated.


if(c){
var o=f.totalSubCols,q=f.subColStart,B=f.subColEnd;
if (!f.isMulti) {
b.push("proxy")
}
C=[];
if(o>6){
m=[];
if(l||q===1){
C.push("col-start1")
} else {
m.push("left:"+(((q-1)/o)*100)+"%")
}
if(l){
m.push("right:"+((100-((B-q+1)/o)*100))+"%")
} else {
if(B===o){
m.push("right:0px")
} else {
m.push("right:"+(100-(B/o)*100)+"%")
}
}
}else{
C.push("total-cols"+o);
if(l){
C.push("col-start1","col-end"+(B-q+1))
} else {
C.push("col-start"+q,"col-end"+B)
}
}
}

Given that what you want to display really *is* a table, I would take the simple approach and just *use* a <table>.

If each row in the <table> represented, say, half an hour, then when you create a <td> for an event, you just use <td rowspan="x"> where "x" is the number of half hour segments it needs to occupy.

When placing an appointment, you just create the <td> without concern as to whether or not there is already a <td> for that starting <tr>.

You do, however, keep track of the maximum number of <td>s that are contained, ether directly or via rowspan, in any given row.

Then you go back through the <table> and add blank <td>s as needed.

But, you know, this would be *MUCH* better done in server-side code. Presumably, the appointments are in a database table, no? So a correctly structured SQL query would give you the data in ready-to-use fashion and then the PHP/ASP/JSP code to generate the table (or <div>s, if you still want to go that route) is nearly painless.

The secret will be in building the DB correctly and in writing a clever SQL query.