Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Archive > Adding Calendar Icons
Shadzonic (Member) 5/17/2009 6:57 PM EST : RE: Calendar Icons v1.2

Shadzonic
Posts: 82

0
Like

0
Dislike

Hello Mottie,

I'm new to guildportal and I have very little knowledge of what i'm doing.

I'm extremely grateful for your site!

I just spent an hour trying to figure out why my "Today" wasn't green and looked like the other events when there is an event scheduled.

It seems that these two lines above are switched.

.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; }
.mainCalendarEvent { background: #080c21 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell-evt-big.gif) top center repeat-x; }



Shadz

TopBottom

Mottie (SuperAdmin) 5/17/2009 9:09 PM EST : RE: Calendar Icons v1.2
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Shadzonic!

Thanks for catching that... I see you figured out that the further down the CSS is on the page, the higher priority it takes over the CSS above it. 

I'll switch the CSS in the posts - thanks!
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Manacat (Member) 8/6/2009 10:13 AM EST : RE: Calendar Icons v1.2

Manacat
Posts: 19

0
Like

0
Dislike

Ok here I am again. I have tryed all the codes in a html box onthe page that I wasn it to work on and I cant get it to work, What am I doing wrong. I can not put anything in the header part. as for the calender I used the last updated one and it will not work. I will change it so that you can see the page.

Thank you 
Manacat
Temple of light

TopBottom

Mottie (SuperAdmin) 8/6/2009 1:14 PM EST : RE: Calendar Icons v1.2
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Manacat!

Ummm so how are you copying and pasting the code into the free form text/HTML box?

Looking at what you have on your page, everything has been compressed into one line. The problem with that is that some code is put on to the same line as the comments, so it's getting ignored.

When you copy the code from the forums, try highlighting all the code, then using CTRL-C to copy it to your clipboard. Once you get into the editor where all the code is going, use CTRL-V to paste it. There should be line breaks in the code.

I also noticed you are using the script to change your Join this guild arrows... you need to use only the URL (direct link) in the variable:

It should look like this:
var leftArrow = "http://i248.photobucket.com/albums/gg189/psyko4cats/guild/bluespring.gif";
Not this:
var leftArrow = "http://s248.photobucket.com/albums/gg189/psyko4cats/guild/?action=view&current=bluespring.gif" target="_blank"><img src="http://i248.photobucket.com/albums/gg189/psyko4cats/guild/bluespring.gif" border="0" alt="Photobucket"></a>";
Hopefully this will get it working for you 
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Manacat (Member) 8/7/2009 12:25 AM EST : RE: Calendar Icons v1.2

Manacat
Posts: 19

0
Like

0
Dislike

ok I have done every thing the way you say, I save it and it all runs together, how do I but breaks in is like
<br> I dont' remember Please can you help
TopBottom

Mottie (SuperAdmin) 8/7/2009 10:47 AM EST : RE: Calendar Icons v1.2
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Manacat!

Try this... It's the same code but with the comments removed. I have no idea why your code is being smushed on to one line *shrug* but this should bypass the problem.

<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"]);
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"]);
var viewMySignUps = "My Sign-ups";

$(document).ready(function() {
$(".CenterContentZone").find("#tblMonthlyCalendarTable").find(".NormGridRow,.AltGridRow").each(function() {
addIcons($(this),"right","32","32");
});
$("a").each(function() {
if ($(this).attr("title").match("details of this event on the Calendar")) {
addIcons($(this).parent(),"right","32","32");
}
});
styleCalendar ("side",27);
styleCalendar ("main",100);
});
</script>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Bob_Laublaw (Member) 10/28/2009 1:59 PM EST : RE: Calendar Icons v1.2
Bob_Laublaw
Posts: 1256

0
Like

0
Dislike

Hey Mottie,

Back again with more questions... this time on the calendar controls.

Following the posts above, I've been able to get the icons working. I even have it working in the side box and a 'events this week' box. There are two problems though... which could ultimately be my fault. Here goes...

First, when using the Enhanced Calendar widget type for the side box or 'events this week' box, clicking on the event link is the issue. Since it's an enhanced calendar control, it simply reloads the current page and puts that event's details (description, signup, comments, followup) in that control. Needless to say, what I would hope would happen is the link takes you to the actual calendar page.

You can see examples of this here.

Mayhaps you could make an option to edit those links to go to our calendar page (through a var setup like you need for a guild's forums address in your recent posts script) with the proper EventToView variable setup. You could even make it a permenant override of the link setup. If the user is already on the full calendar page it'll just reload that page. If they are on another page it'll take them to the real calendar page.

Also on that same page is the second issue. In the "weeks events' box you'll see the icons are trying to show twice at different sizes. You'll see on large VoA icon, then the three small VoA, TotC, and Onyxia icons above and to the right. I'm not sure what's causing this but I probably didn't do something right in the user configured setup of the script.

Raid Leader for <High Lords of the Horde> on Hyjal (US)
Zymurg
TopBottom

Mottie (SuperAdmin) 10/28/2009 4:15 PM EST : RE: Calendar Icons v1.2
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Bob!

It looks like you have the calendar styling script in there twice, the best version is in the Events script box and the one you should get rid of is in the footer.

I'll start working on something that could replace the links for you
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Bob_Laublaw (Member) 10/28/2009 5:43 PM EST : RE: Calendar Icons v1.2
Bob_Laublaw
Posts: 1256

0
Like

0
Dislike

Yeah... had it that way to try and not have the same code copied on each page I want a calendar view on. But then the homepage with the Week View requires an additinal line of CSS... so I put it's own script there while keeping the footer one. Now I just have the script on each page with a calendar control setup for that specific pages needs.

Thanks for looking into the link issue... that will be a very nice feature.

Raid Leader for <High Lords of the Horde> on Hyjal (US)
Zymurg
TopBottom

Mottie (SuperAdmin) 10/29/2009 4:45 AM EST : Calendar Icons v1.3
ACK!
Mottie
Posts: 3883

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.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"></div>
<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:

.mainCalendarWeek, .mainCalendarThisWeek, .mainCalendarNav {display:none;}

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