Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Adding Icons to your Calendar
Mottie (MVP) 10/8/2008 11:20 AM EST : RE: Calendar Icons v1.1
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

If you don't want to start using the custom CSS, just add this bit of CSS down in the footer with the script (or anywhere). All you have to do is add a "<style>" at the top and a "</style>" at the bottom. Like this:
<style type="text/css">
.MoGridRow { color: #ffffff; background-color: #473e2d; border: 0px !important; min-height:56px; }
.AltGridRow { color: #ffffff; background-color: #222222; border: 0px !important; min-height:56px; }
.NormGridRow { color: #ffffff; background-color: #111111; border: 0px !important; min-height:56px; }
</style>


TopBottom

Khaelle (New Admin) 10/9/2008 7:12 AM EST : RE: Calendar Icons v1.1
Khaelle
Posts: 313
Fingers of Fury!

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. 
TopBottom

Mottie (MVP) 10/9/2008 8:53 AM EST : RE: Calendar Icons v1.1
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Could you please share the link to your site?
TopBottom

Khaelle (New Admin) 10/9/2008 9:12 AM EST : RE: Calendar Icons v1.1
Khaelle
Posts: 313
Fingers of Fury!

Be glad to. Resurrected Legends
TopBottom

Gax_DDO (New Admin) 10/9/2008 6:43 PM EST : RE: Calendar Icons v1.1
Gax_DDO
Posts: 396
Fingers of Fury!

Ok I used this in a free form Html on my calendar page:

And IE show no changes but Firefox adds the image  and removes the text. I would like it to show up with text and image in IE.

Any help?

Edit: Just discovered it is something in my banner area custom HTML..... not sure what yet.

Edit2: Looks like it is being caused by the Marquee scripting.
When I remove it from the Custom HTML the image shows and I have no text. I want to keep the text. 

Edit3:
Ok just removed what seemed like an extra "});" and it now displays the image but still no text.
If I keep this up I might just firgure it out myself.

TopBottom

Mottie (MVP) 10/9/2008 6:44 PM EST : RE: Calendar Icons v1.1
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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.
TopBottom

Khaelle (New Admin) 10/10/2008 5:58 AM EST : RE: Calendar Icons v1.1
Khaelle
Posts: 313
Fingers of Fury!

Mottie I don't care what anyone else says about you, you are outstanding.Thanks for looking into that overlap issue and have yourself a great weekend.
TopBottom

Mottie (MVP) 10/14/2008 8:10 AM EST : Calendar Icons v1.2
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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:

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

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).
Edit (8/7/2009): Added The Trial of the (Grand) Crusader icons
TopBottom

Jizmak-Rebirth (New Admin) 1/19/2009 1:22 AM EST : RE: Calendar Icons v1.2
Jizmak-Rebirth
Posts: 1157
Zomgawsh Poster

I am still having issues with this one since the GP update that has broken so much other stuff.  Any ideas on getting this to work again?
TopBottom

Mottie (MVP) 1/22/2009 4:07 AM EST : RE: Calendar Icons v1.2
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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?
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%