SharePoint 2007 – DOCTYPE Causing Calendar Event Height Bug
Posted on 21 June 2010 by Jason Grimme
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.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <script type="text/javascript"> // Resize calendar events to be the proper height // I am 100% certain this can be optimized // Narrow down our scope a little by first looking only at tables var all_Tables = document.getElementsByTagName("table"); for (i = 0; i < all_Tables.length; i++) { // Look for a table cell event in either day or week view if(all_Tables[i].className == "ms-cal-tdayitem" || all_Tables[i].className == "ms-cal-tweekitem") { var tbl_td = all_Tables[i]; // Grab the rendered height of the row var row_height = tbl_td .parentNode.offsetHeight; var table_divs = tbl_td .getElementsByTagName("div"); // The first div in this cell will be the event we want for (j = 0; j < table_divs.length; j++) { var calendar_event = table_divs[j]; // Force the height of the cell to be the same as the row calendar_event.style.height = row_height; } } } </script> |
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.


Worked great for me, thanks!
sp2007 + doctype = fail
Worked!