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

---

BEFORE

AFTER


The Code & Customizing

<script type="text/javascript">
$(document).ready(function() {
 var events = new Array();

 var imageAlign = "right";
 var imageHeight = "22";
 var imageWidth = "22";
 
 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|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","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(["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"]);

  $("#tblMonthlyCalendarTable").find(".NormGridRow,.AltGridRow").each(function() {
   for (var j=0; j < events.length; j++ ) {
    if ($(this).html().match(events[j][0])) {
     var temp = "<img align='" + imageAlign + "' src='" + events[j][1];
     temp += "'width='" + imageWidth + "' height='" + imageHeight + "'>";
     $(this).html(temp + $(this).html());
    }
   }
  });
});
</script>

• Add the following script to the header area, footer or to a "Free Form Text/HTML" box on the calendar page.
• Change the "imageAlign" variable (in green) to position the icon on either the "right" or "left" side of the calendar box
• Change "imageHeight" and "imageWidth" to set the image size (in red) you prefer.
• Edit, add or remove events by changing the "events.push" line.
  
  events.push(["Zul'Aman|ZA","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ZA.gif"]);
  
  
  • 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 "Zul'Aman" instance, that the first part includes both "Zul'Aman" and "ZA" (ZA being the abbreviation for the instance). The names are case dependent, 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!

Edit (1/5/2009): Added WotLK icons
Edit (4/23/2009): Added Ulduar icon
Edit (8/7/2009): Added Trial of the (Grand) Crusader icons

I don't see any events on your Calendar, but maybe the script is somehow getting run twice... try moving it into the header and see if that makes a difference. I'll modify it to make it only run once just in case 

DOH, I guess I should have seen this when you first posted about the problem... you have the script on your page twice! Once in the banner area and a second time in your footer area. They are both independent of each other, so that's why you see it twice. I'd delete the banner area copy.

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

---

This update will now add icons to the Events box and if you place a calendar in one of the side columns, it will add icons and shrink it to make it more ascetically pleasing.

Events


Center Column Calendar (same as before)


Side Column Calendar

Before (shrunk)	After (with tooltips)
->

The Code & Customizing

<style type="text/css">
.sideCalendarTooltip {color:#ffcc00;}
.sideCalendarMonthTitleContainer { height:10px; font-size:7pt; }
.sideCalendarMonthTitle { background: #2d2d2d; color:#daca92; font-weight:bold; padding: 5px; border:0px; }
.sideCalendarMonthTitle a:link { text-decoration:none; color:#daca92;}
.iconWrap { height:16px; width:16px; }
</style>
<script type="text/javascript">
$(document).ready(function() {
 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|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","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"]);

/*
*****************************
 Don't change anything below this line!
***************************** */
 // Main Calendar
 $(".CenterContentZone").find("#tblMonthlyCalendarTable").find(".NormGridRow,.AltGridRow").each(function() {
  addIcons($(this),"right",22,22);
 });
 // Events Box
 $("a").each(function() {
  if ($(this).attr("title").match("details of this event on the Calendar")) {
   addIcons($(this).parent(),"right",22,22);
  }
 });
 // Side Calendar (Mini)
 $(".LeftContentZone,.RightContentZone").find("#monthlyCalendarCalendarColumn").find("table:eq(0)").each(function() {
 try {
   $(this).find(".NormGridRow,.AltGridRow").each(function() {
    var evtTitle = "<div class='sideCalendarTooltip'>" + $(this).find("a").text().replace("'","&#39;") + "</div>";
    var divTitle = evtTitle + $(this).attr("title").replace("(","<br>(");
    $(this).attr("title","").mouseover(function(){ddrivetip(divTitle,'','240')}).mouseout(function(){hideddrivetip();});
    $(this).html(evtTitle); // replace date contents with just the event, for addIcons function
    addIcons($(this),"right",16,16);
    $(this).removeClass("NormGridRow").removeClass("AltGridRow").unbind().addClass("iconWrap").children("div").remove();
    $(this).css("border-width","0px").css("padding","0px 5px").css("margin","0px");
   });
   $(this).attr("title","");
   $(this).find(".ContentBoxTitle").css("height","10px").css("font-size","7pt");
   $(this).find("tr:gt(2)").find("td").css("min-width","22px").css("height","30px").css("font-size","8pt").css("align","center");
   $(this).find("a:contains('Prev Month')").html("&lt;");
   $(this).find("a:contains('Next Month')").html("&gt;");
   $(this).find("table.ContentBoxTitle").each(function() {
    $(this).parent().addClass("sideCalendarMonthTitleContainer").css("color","").css("background-color","");
    $(this).removeClass("ContentBoxTitle").css("color","").css("font-weight","");
    $(this).find("td").addClass("sideCalendarMonthTitle").removeClass("ContentBoxTitle").css("color","").css("background-color","");
    $(this).find("a").css("color","");
   })
 } catch(e) {}
 });
 function addIcons (box,imgAlign,imgWidth,imgHeight) {
  for (var j=0; j < events.length; j++ ) {
   if (box.html().match(events[j][0])) {
    var temp = "<img align='" + imgAlign + "' src='" + events[j][1];
    temp += "'width='" + imgWidth + "' height='" + imgHeight + "'>";
    box.html(temp + box.html());
   }
  }
  return true;
 }
});
</script>

• This script needs the Title of your "Events" box to be included (in purple). It only matches the word, so it will find "Events" and "Upcoming Events" - it is case sensitive. This is no longer required!
• For the rest of the instructions on how to customize this script, please refer to the top post.
• There isn't much to modify with this new script besides changing the icon images for your particular game. You can modify the image position and size.
• The side calender is set up to be as small as possible. It's optimally sized with a side column width of 175px, but should expand for wider columns.
• Added a "sideCalendarTooltip" class for the tooltip header. Change the text color by replacing the value in purple
  
  .sideCalendarTooltip {color:#ffcc00;}
• Added Month title classes to style that portion of the calendar. Two classes were added. One for the title container (sideCalendarMonthTitleContainer) and the second for the title and month selectors (sideCalendarMonthTitle). Change the values in purple to match your site
• Added "iconWrap" class in the CSS that wraps around the icons to prevent overlapping. The height & width (in red) should match the icon size.

Edit (10/2/2008): Added ".ContentBoxTitleNoBackground" into the script.
Edit (10/3/2008): Modified the Events Box script to work without needing to find a "ContentBox" which removed the change above.
Edit (10/8/2008): Modified the Side Calander script to make the tooltips work with IE (and hopefully Safari) & added a tooltip header class "sideCalendarTooltip"
Edit (10/9/2008): Modified the Side Calendar script to prevent icon overlapping with IE & added more CSS classes for the month title and icons.
Edit (10/11/2008): Added code to prevent mouseover highlighting.
Edit (1/5/2009): Added WotLK icons
Edit (4/23/2009): Added Ulduar icon
Edit (8/7/2009): Added Trial of the (Grand) Crusader icons

Did you set the name of your event box in the script?

var eventsBoxTitle = "Events";

That may be the problem

Edit: Ok I see now... Two things to do to get it to work:

• The script was looking for the box title in "ContentBoxTitle"... I forgot to include "ContentBoxTitleNoBackground". It's now added into the script above.
  
  
• Second thing is on your side. It looks like you used custom content box HTML? The script needs to find a "ContentBox" class to find the Events box. So you'll need to go back to your custom content box HTML and add this class to the top most table, or you could add a <div class="ContentBox"> around the whole thing. I wish there was another way to find the events box, but GuildPortal doesn't add an ID for it like it does with the calendar.
  
  <table width="100%" border="0" cellpadding="0" cellspacing="0" class="ContentBox">