Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Archive > Adding Calendar Icons
Mottie (SuperAdmin) 9/23/2008 10:08 AM EST : Adding Calendar Icons
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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
This topic was moved from forum Instructions to forum Archive by Mottie.

This topic was moved from forum Instructions to forum Archive on 10/30/2010 9:21 AM by Mottie.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 10/1/2008 7:48 AM EST : Calendar Icons v1.1
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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

Calendar Icons v1.1

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 tooltipswork with IE (and hopefully Safari) & added a tooltip header class"sideCalendarTooltip"
Edit (10/9/2008): Modified the Side Calendarscript to prevent icon overlapping with IE & added more CSS classesfor 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
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 10/14/2008 8:39 AM EST : Calendar Icons v1.2
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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:

.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 (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).
Edit (8/7/2009): Added Trial of the (Grand) Crusader icons
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

electraoutlaw (Applicant) 11/7/2008 10:48 AM EST : RE: Calendar Icons v1.2
electraoutlaw
Posts: 1172

0
Like

0
Dislike

Mottie,
I've been away for a few months and look what's happened when I come back!  You've pumped out so much awesome stuff I don't know what to do.

I love this calendar code, and I am currently working on customizing it for my City of Heroes guild.  I have questions about the background images though.  Of course, I can't just make things simple so I want to make my own images for the background (already made over 40 event icons!). 

I see the part in the script that specifies the size of each day's cell, so can I make something that's only a couple pixels wide and let it repeat?  Then what about height, if a certain day were to have several events planned, the cell would expand vertically, but would my image stretch to match? 


You said this:
".mainCalendar .AltGridRow" - Style for the alternate event boxes

Do alternate event boxes occur on days that have more than one event?  Like Oct 24th on your calendar, for example.


Also, (and I think this is it ) for the "Events This Week" calendar like you have on the homepage here, do I need to repaste the entire script onto the home page and just ad the {display:none} CSS to it?  I'm not really sure about that part.

Thanks for all you do Mottie, and for always being so helpful. 
TopBottom

Mottie (SuperAdmin) 11/7/2008 4:43 PM EST : RE: Calendar Icons v1.2
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Guppy Queen (Applicant) 4/13/2009 7:17 PM EST : RE: Calendar Icons v1.2
Guppy Queen
Posts: 41034

0
Like

0
Dislike

Hi Mottie, this is an awesome feature. I just used it on the HGS site. One question I have is... how do I get the icons to work? I'm not sure what I'm doing wrong.

And I am not sure how to get the side calendar to work
TopBottom

Mottie (SuperAdmin) 4/13/2009 8:54 PM EST : RE: Calendar Icons v1.2
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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.


Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Guppy Queen (Applicant) 4/14/2009 2:35 PM EST : RE: Calendar Icons v1.2
Guppy Queen
Posts: 41034

0
Like

0
Dislike

Mottie, your the best. The icons work now.

As for the side calendar, I’m still confused as to how to get it to appear. Should I have a free-form HTML box?

Also, the icons are not appearing in my Events box, which is on a different tab (content page).

http://img529.imageshack.us/img529/1813/picture3s.jpg

thank you!

TopBottom

Mottie (SuperAdmin) 4/15/2009 12:04 AM EST : RE: Calendar Icons v1.2
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Guppy Queen (Applicant) 4/15/2009 2:38 AM EST : RE: Calendar Icons v1.2
Guppy Queen
Posts: 41034

0
Like

0
Dislike

Got it, thanks Mottie
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%