Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Calendar & Events > Event Widget Icons
Mottie (SuperAdmin) 10/30/2010 9:52 AM EST : Event Widget Icons
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Event Widget Icons

GuildPortal admin site link to original post

I've moved the original post which included calendar icons (for the original calendar setup) to the archives. The event icon script is actually really short so you won't need to include the external calendar script either. I did keep the original sexy screenshot though!.. wow 2008, I've been doing this too long LOL shocked



Code
<script type="text/javascript">
$(document).ready(function(){
var events = [];

events.push(["birthday|Birthday","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/birthday.gif"]);
events.push(["Fun event|party","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 imgAlign = 'right';
var imgWidth = 24;
var imgHeight = 24;

 // Event widget icons - Don't change anything below
 $('.gpWidget-eventsml a[href*=EventToView]').each(function() {
  var t, box = $(this);
  for (var j=0; j < events.length; j++ ) {
   if (box.html().match(events[j][0])) {
    t = '<img align="' + imgAlign + '" src="' + events[j][1] +
       '" width="' + imgWidth + '" height="' + imgHeight + '">';
    box.prepend(t);
   }
  }
 });
});
</script>
Customizing
  • Ideally, add the script to a "Free Form Text/HTML" box on the event page (hide it with this script) - make sure the editor is in "Raw/Script" mode! You could also add the script to the header or footer area, but this is less desirable unless you have event widgets on several pages.
  • Change the "imgAlign" variable (in green) to position the icon on either the "right" or "left" side of the event widget.
  • Change "imgHeight" and "imgWidth" (in red) to set the image to the size you prefer.
  • Edit, add or remove events by changing the "events.push" lines.

    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 event widget!
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%