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

---

Adding Calendar Icons

GuildPortal admin site link to original post

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 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!

Edit (1/5/09): Added WotLK icons
Edit (4/23/2009): Added Ulduar icon

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|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"]);

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 (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 instead of the event color (blue).

Hiya Electraoutlaw!

I'm glad you like the calendar and I'm glad you're back!

The calendar backgrounds are just a gradient image. They are defined in the CSS to repeat in the x-direction (width) but not in the y-direction (height). These background images do not stretch, but since I made then bottom edge of the gradient match the background color, you won't notice where it ends.

The side calendar has a set size cell - meaning that adding more events won't change it's size. So the background image is just fine being 3 pixels wide and 30 pixels tall.

The main calendar will expand both in width and height. It will dramatically expand depending on how many events are scheduled in a day. I opted to make the background image 3 pixels wide and 300 pixels tall, so that you can still see some gradient effect with up to four events (I think). And with even more events, the gradient will taper off to match the background color.

"DaysofWeek" is the CSS for the days of the week title row - (S)un, (M)on, (T)ues, etc. - it's defined for each cell in that row.

"DaysofMonth" is the CSS for every numbered cell on the calendar.

Alternate event boxes are for days with more than one event. The colors alternate on the events to block them off - I believe the popular geek term is zebra striping. You could also add a gradient background image here or just leave it transparent - whatever you like!

And lastly, for the "Events This Week" calendar to work, you should have the complete script in the header or footer, add an "Enhanced calendar" box to your home page, then add the {display:none} part of the CSS somewhere on the home page ONLY. Just find a free form text/HTML box somewhere and add this (with the "style" tags surrounding it):

<style type="text/css">
.mainCalendarWeek, .mainCalendarNextWeek, .mainCalendarPrevMonth, .mainCalendarNextMonth {display:none;}
</style>

Hi Guppy Queen!

All you have to do is find the icons and then add the events (like below). I looked at your calendar and picked out events that could use an icon. You find a keyword that you will always use for that event like "Meeting" or "Interview" then just add this word as an event variable in the script.

 events.push(["Doctors Without","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/fun.gif"]);
 events.push(["Grand Opening","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/fun.gif"]);
 events.push(["Interview","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/fun.gif"]);
 events.push(["Meeting","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/fun.gif"]);
 events.push(["Photoshoot","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/fun.gif"]);
 events.push(["Pod Race","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/fun.gif"]);
 events.push(["RP|Role Play","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/fun.gif"]);
 events.push(["Rehearsal","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/fun.gif"]);
 events.push(["Tell me a Story","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/fun.gif"]);
 events.push(["Works Social","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/fun.gif"]);

If you look at the keyword (in blue) you'll see that they are all unique. Don't add a keyword like "play", because it will match "playground", "player" and "roleplay". But it won't match "Role Play" - the key word is case sensitive. If you look at the "RP|Role Play" event above, you can read this keyword as look for "RP" OR "Role Play". The "|" character ( shift-\ ) on the keyboard is like the word "or".

Now all you have to do is replace the image URL in orange with your icon.. I'm too lazy to find icons for all those events LOL.

As for the side calendar, there is nothing to do but ensure the script is on the same page as the side calendar - it automatically does all the work for you, including making the popups and adding the icons.

Hi Guppy Queen!

Oh, you just need to add that same code on to your page that has the events box.... you can paste it into any free form text/HTML box on that page.