Above might possibly be the worst article title ever, but I tried to be as descriptive as possible.  The following covers a fix I worked out for a bug that Microsoft has never fixed with SharePoint 2007.  If you do some research you will find several people have noticed this but nobody has found a great work around.

Example of what is and what should be

The bug occurs when your master page has a DOCTYPE declared and there is a calendar web part on the same page.  Appointments on the calendar have a declared height of 100% which is not a valid property when you have a doctype declared.  While the default Microsoft master page does not have  a doctype (Nice, Microsoft!), another theme they ship called BlueBand.master does.  This makes it a bug that should be covered by Microsoft.  For those who don’t know, a doctype is required on every HTML page as it tells the rendering engine what kind of markup it contains.  Without a doctype, browsers go into quirks mode and rendering differs vastly.

Here and here are some instances of others recognizing this problem.

The Fix

The main problem with the calendar event divs is that they have a height property set to 100%.  But 100% of what exactly?  There are no other defined heights in in the calendar table.  We can’t specify the height of the div when we output the HTML because we don’t know how high it will need to be.

The hack that I came up with uses Javascript to wait until the page loads, crawl through the DOM, find events, and then grab the parent element of the event. It then calculates the rendered height of the table row.  Once we have that we set the height of the event div to the exact height of that row.  This fix/hack has worked perfectly for me and you can’t even notice the script execution.

This works for both the day and week view of the calendar web part. You will need to make sure this runs once the page loads by either putting it in the onload function, make an onreadystatechange event listener, or put it at the very end of the master page.