I tried the coding you suggested Mottie to correct the stacking icons with IE7 and all I ended up with is black backgrounds in all the items on my site that utilize tables (looks good btw). The icons were still being rendered on top of each other in IE7. 

Be glad to. Resurrected Legends

Ok I fixed the overlapping problem and I added a couple of classes to the calendar to allow CSS styling of the calendar title as I noticed yours was all black.

You can remove the ".MoGridRow", ".AltGridRow" and ".NormGridRow" styles that I told you to add as it messes up the rest of the site styles.

Make sure you adjust the height and width of the CSS class ".iconWrap" to match the icon size of your side calendar - it's set to the 16x16 pixel default.

Calendar Icons: v1.0 (no styling) | Calendar & Event Icons: v1.1 (no styling) | v1.2 (styling) | v1.3 (changing links)

---

Calendar Icons v1.2

This update adds CSS classes to the calendar. You can now assign a style for each day on the calendar for both the side calendar and the main calendar. There were no changes to the Upcoming Events content box. See an example on "test-site 3 Calendar" page.

Side Calendar (now with icons inside the tooltip)


Main Calendar

The Code

I tried adding this code into the footer are, but had some problems with it working properly. So I added the script into a "Free Form Text/HTML" content box on my calendar page. It should work in the header area as well.

<style type="text/CSS">
.sideCalendar { border: #333333 1px solid; }
.sideCalendarMySignups { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell.gif); height: 15px; font-size: 8pt; cursor: pointer; }
.sideCalendarMonthTitleContainer { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell.gif); height: 10px; font-size: 7pt; }
.sideCalendarMonthTitle, .sideCalendarMonthTitle a { font-weight: bold; padding: 5px; }
.sideCalendarDaysofWeek { background: #000000; border: #333333 1px solid; border-collapse: collapse; }
.sideCalendarDaysofMonth { background: #111111 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell.gif); min-width: 22px; font-size: 8pt; border: #333333 1px solid; padding: 2px;}
.sideCalendarDaysOutsideThisMonth { background: #070707 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell-out.gif); color: #444444; }
.sideCalendarEvent { background: #000022 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell-evt.gif); font-weight: bold; cursor: pointer; }
.sideCalendarToday { background: #002200 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell-today.gif); color: #ffffff; font-weight:bold; }
.sideCalendarTooltipTitle { color: #00f000; }

#dhtmltooltip { position: absolute; width: 150px; border: #777777 1px solid; padding: 3px; background: #000000; color: #ffffff; visibility: hidden; z-index: 100; }

.mainCalendar { border: #333333 1px solid; }
.mainCalendarMySignups { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell.gif); height: 20px; font-size: 8pt; cursor:pointer; }
.mainCalendarMonthTitleContainer { background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell.gif); height: 20px; font-size: 8pt; }
.mainCalendarMonthTitle, .mainCalendarMonthTitle a { font-weight: bold; padding: 5px; }
.mainCalendarDaysofWeek { background: #000000; border: #333333 1px solid; border-collapse: collapse; }
.mainCalendarDaysofMonth { background: #111111 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell-big.gif) top center repeat-x; min-width:50px; font-size:10pt; border:#333333 1px solid; padding:2px; }
.mainCalendarDaysOutsideThisMonth { background: #070707 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell-out-big.gif) top center repeat-x; color: #444444; }
.mainCalendarEvent { background: #080c21 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell-evt-big.gif) top center repeat-x; }
.mainCalendarToday { background: #002200 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell-today-big.gif) top center repeat-x; color: #ffffff; font-weight:bold; }

.mainCalendar .MoGridRow { background: #004566; min-height: 40px; }
.mainCalendar .NormGridRow { background: transparent; min-height: 40px }
.mainCalendar .AltGridRow { background: #000011; min-height: 40px }
</style>
<script src="http://www.axiomfiles.com/Files/243007/calendarstyle1-2.js" type="text/javascript"></script>
<div style="display:none;" id="tempvar"/>
<script type="text/javascript">
var events = new Array();

events.push(["Karazhan|Kara","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Kar.gif"]);
events.push(["Zul'Aman|ZA","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ZA.gif"]);
events.push(["Gruul","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/GL.gif"]);
events.push(["Mag|Magtheridon","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Mag.gif"]);
events.push(["Tempest|The Eye|TK","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/TK.gif"]);
events.push(["Serpentshrine|SSC","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SSC.gif"]);
events.push(["Hyjal|MH","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/MH.gif"]);
events.push(["Kazzak|DLK","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DLK.gif"]);
events.push(["Doomwalker|DW","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DW.gif"]);
events.push(["Black|BT","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/BT.gif"]);
events.push(["Sunwell|SW|SP","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SP.gif"]);

events.push(["Naxx","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2.gif"]);
events.push(["VoA|Archavon","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/VoA.gif"]);
events.push(["CoA|OS|Obsidian|Sartharion","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/OS.gif"]);
events.push(["EoE|Malygos|Eye of Eternity","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EoE.gif"]);
events.push(["Ulduar","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ulduar.gif"]);
events.push(["ToC|of Crusader|he Crusader","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Crusader.gif"]);
events.push(["TGC|Grand Crusader","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/GrandCrusader.gif"]);

events.push(["birthday|Birthday","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/birthday.gif"]);
events.push(["Fun event|fun event","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/fun.gif"]);
events.push(["quest|Quest","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/quest.gif"]);
events.push(["Unk|unk","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/unknown.gif"]);

var viewMySignUps = "My Sign-ups";

$(document).ready(function() {

 // Main Calendar
$(".CenterContentZone").find("#tblMonthlyCalendarTable").find(".NormGridRow,.AltGridRow").each(function() {
addIcons($(this),"right","32","32");
});
// Events Box
$("a").each(function() {
if ($(this).attr("title").match("details of this event on the Calendar")) {
addIcons($(this).parent(),"right","32","32");
}
});
// Calendar Styling
styleCalendar ("side",27);
styleCalendar ("main",100);
});
</script>

Customizing

CSS - Overall

There is a LOT of CSS here, and I want to cover all the important parts so everyone understands. I apologize in advance for being long-winded LOL.

To start, the "sideCalendar" and "mainCalendar" definitions are very similar. The side calendar uses background images that are only 30 pixels in height whereas the main calendar has images that are 300 pixels in height. I tried to name the CSS class by what it does (add the prefix sidecalendar or maincalendar):

• "MySignups" - Signup link styling (this style applies to the container around the link)
• "MonthTitleContainer" - This wraps the navigation and month title, contains the background image
• "MonthTitle" & "MonthTitle a" - Styling of the text
• "PrevMonth" & "NextMonth" - Wraps around the links that change the currently displayed month.
• "DaysofWeek" - Styling for the days of the week header (Sun through Sat)
• "DaysofMonth" - Applies to every day in the calendar (overall stlying)
• "DaysOutsideThisMonth" - Styling for days that are outside the current month
• "Event" - Styling for days with an event
• "Today" - Styling for Today

The following CSS classes are specifically for the side or main calendar:

• ".mainCalendar .MoGridRow" - Style for the mouseover of an event
• ".mainCalendar .NormGridRow" - Style for the normal event boxes
• ".mainCalendar .AltGridRow" - Style for the alternate event boxes
• "sideCalendarTooltipTitle" - Color of the event name in the tooltip
• "#dhtmltooltip" - Is the same tooltip styling that is added by default. It's included here to allow you to change the border and background colors. Note: This line will effect every tooltip on your site if the code is added to the header or footer of your site.

CSS - Weekly view



The CSS also adds a class for each week, this week and for next week.

• "Week" - Applied to every week on the calendar
• "ThisWeek" - Applied to the current week only
• "NextWeek" - Applied to the following week

So, using the following CSS, you can add an "Events for this week" box on your Home page (see an example on "test-site 3 Home" page)

.mainCalendarWeek, .mainCalendarNextWeek, .mainCalendarPrevMonth, .mainCalendarNextMonth {display:none;}

The navigation buttons in the title are hidden because clicking on them will take the calendar to the next month and not the next week and since the script uses "today" to find "this week", all you'll end up with is an empty box. All the other links in the window work as before.

You can also make a calendar show just next weeks events by using this CSS:


Events

If you don't play World of Warcraft, you can modify the "events" in the javascript to match your game's events.

To edit, add or remove events, change the "events.push" line.

events.push(["Event|event","ICON URL"]);

• The first part (in blue) has the possible names of the event separated by a "|" (Shift-\, above the enter key on the keyboard). So you'll notice for the "Event", that the first part includes both "Event" and "event". The names are case sensitive, but can match partial names... so I could have used "irthday" to find both "Birthday" and "birthday", but I didn't so everyone would understand what's going on here.
• The second part of the events variable (in orange) is the URL to the icon.
• I have several custom events included: "Birthday", "Quest" and "Unknown". So feel free to follow those examples and add your own custom icons to your guild calendar!

Sign-ups Button

You can change the text of your "View My Sign-Ups" link by modifying the following variable:

var viewMySignUps = "My Sign-ups";

The text in green is your new text for the link. In addition, the script also makes the entire box clickable. The box is styled using the "mainCalendarMySignups" or "sideCalendarMySignups" CSS.

Calendar styling

• Adding icons to the main calendar & events box is the same as in version 1.1:
  
  addIcons($(this),"right","32","32");
  
  
  • Modify the icon position by changing the text in green to "left" or "right"
  • Change the icon width and height by modifying the numbers in red (first number is the width, second is the height)
• The script to add the calendar CSS classes has two parts:
  
  styleCalendar ("side",27);
  styleCalendar ("main",100);
  
  
  • The text in green ("side" or "main") to tell the script where to add the style.
  • The number in red tells the script the size of the calendar cell.
    
    NOTE: This number is set to "27" by default because the width of my side column is set to 200px ( 7 days x 27  pixels = 189 pixels + the margins & borders, makes the side calendar fit pretty closely). If your side column is still set to the default 175px, then set the calendar cell size to "24" (7 x 24 = 168, and that leaves some room for borders and margins).

The Script (notes)

The actual calendar script was uploaded to my GuildPortal files area because of possible bandwidth issues. You can link to it or make a copy and save it to your own site, just in case. I've also added a backup copy of the javascript on my ripway.com site - please don't use this one for your site as there is a strict bandwidth limitation on this site.

There is one line in the code above '<div style="display:none;" id="tempvar"></div>' that is REQUIRED to make the side calendar tooltips work properly. Please do not remove or modify this line.

Edit (1/5/2009): Added WotLK icons
Edit (3/23/2009): Changed the "Eye" in Tempest Keep to "The Eye" and added "Eye of Eternity" to the Eye of Eternity.
Edit (4/23/2009): Added Ulduar icon
Edit (5/17/2009): Switched the CSS positions of the main calendar"today" and "event" so that the today color (green) would show insteadof the event color (blue).

Hey Jizmak!

It's working fine for me, check it out on my test-site. Did you remove all extra copies of the jQuery script from your site?