Oh hey Kennymack007!

Oh LOL, so yeah, I'm sorry, to get the icons to work you just need to add an event on your calendar. The event you add should include a keyword in order for the icon to show up. And that should do it for ya

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

---

Calendar Icons v1.3

• GuildPortal has added a bunch of CSS classes to the basic calendar, so if you only want to style your calendar use the CSS and don't bother with this script
• This script still adds specific CSS classes to the calendar as well as event icons.
• This script still adds event icons to the Upcoming Events content box.
• See an example on "test-site 3 Calendar" page.

Side Calendar (icons inside the tooltip)


Main Calendar

The Code

Add this script into a "Free Form Text/HTML" content box on your calendar page. Adding it to the banner or footer HTML will just add excessive content loaded to every page that doesn't have an event calendar and thus slowing page loading time.

<style type="text/CSS">
.sideCalendar { border: #333333 1px solid; }
.sideCalendarTools { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell.gif); height: 15px; font-size: 8pt; text-align: right; }
.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; }

.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2, #preview, #screenshot { color:#dddddd; background:#222222; border: 1px solid #333333; padding:5px; display:none; opacity: 0.9; filter: alpha(opacity=90); text-align:left; }

.mainCalendar { border: #333333 1px solid; }
.mainCalendarTools { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell.gif); height: 20px; font-size: 8pt; text-align: right; }
.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/258012/calendarstyle1-3.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|Uld","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ulduar.gif"]);
events.push(["ToC|TotC|of Crusader|he Crusader","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Crusader.gif"]);
events.push(["TGC|ToGC|Grand Crusader","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/GrandCrusader.gif"]);
events.push(["Ony|Onyxia","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/onx.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 myCalendarPage = 'http://guildportal.com/Guild.aspx?GuildID=258012&TabID=2168226&PageName=Calendar';

var viewMySignUps = "My Sign-ups";

var replaceTools = true;
var myEvents = 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/myEvents.png';
var addEvent = 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/addEvent.png';

$(document).ready(function() {
 // Main Calendar
$(".CenterContentZone").find("#tblMonthlyCalendarTable").find(".smallRound").each(function() {
addIcons($(this),"right","24","24");
});
// Events Box
$("a").each(function() {
if ($(this).attr("title").match("details of this event on the Calendar")) {
addIcons($(this).parent(),"right","24","24");
}
});
// Calendar Styling
styleCalendar ("side",27);
styleCalendar ("main",100);
updateLinks();
});
</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):

• "Tools" - Calendar tool bar styling (this style applies to the container around the my signups and add event links)
• "MonthTitleContainer" - This wraps the navigation and month title, contains the background image
• "MonthTitle" & "MonthTitle a" - Styling of the text
• "Nav" - 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
• "#tooltip" - Is the same tooltip styling that is added if used my tooltip script. It's included here to allow you to change the border and background colors. Note: This line will effect every tooltip on your site and only one copy of it is necessary on the page (it's just added here for completeness).

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, .mainCalendarNav {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

• First off, when you click on a calendar event it will open the event information in place of the calendar sometimes messing up the look of your page. This script version requires you to add the URL to the Calendar page of your site, so when you click on an event on your side calendar or events this week calendar, it opens the event details in your calendar tab! Set the calendar page URL in the variable below:

var myCalendarPage = 'http://guildportal.com/Guild.aspx?GuildID=258012&TabID=2168226&PageName=Calendar';

• Adding event icons is fairly easy if you follow the template below.
  
  
  • Note: 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-up & Add Event Button

• If you don't want to replace the text with icons, you can change the text of your "View My Sign-Ups" link by modifying the variable below. The text in green is your new text for the link. The containing box is styled using the "mainCalendarTools" or "sideCalendarTools" CSS.

var viewMySignUps = "My Sign-ups";

• If you want to replace the text with icons, set the "replaceTools" variable to true, then add your desired icon images into the "myEvents" and "addEvent" variables. This is meant to take the place of the script that was posted in this thread - I don't think (because I haven't tested it) that having both would be compatible:

var replaceTools = true;
var myEvents = 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/myEvents.png';
var addEvent = 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/addEvent.png';

Calendar styling

• Adding icons to the main calendar & events box is the same as in version 1.2:
  
  addIcons($(this),"right","24","24");
  
  
  • 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 is uploaded to my GuildPortal files area. Please feel free to link to it or make a copy and save it to your own site, just in case.

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 (11/10/2009): Replaced ".NormGridRow,.AltGridRow" with ".smallRound" to make the calendar icons work again.

Groovy stuff man.

Is it possible to create a more simple calendar?  I would love to use your calendar atm for our site but it loses the locked background tranparent effect that we have.  I like the idea of placing cell icons and backgrounds for events and uniform matching grid to the site.  Replacing html urls sources is easy.

Have a peak in case you are trying to understand what I mean...

http://www.guildportal.com/Guild.aspx?GuildID=306909&TabID=2796166&PageName=Events

Hi Josewales!

Actually the script above adds a whole bunch of CSS classes to the calendar. So all you need to do is modify the CSS to have transparent backgrounds or semi-opaque backgrounds.

Gotcha I just need to find time and figure out classes are for what before I start copy/pasting .png files lol....long list goodies u got there.