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! > Calendar Control Icons
Mottie (MVP) 10/3/2009 10:35 PM EST : Calendar Control Icons
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Calendar Control Icons

This code will replace the text at the top of the calendar with icons.

*UPDATE* The old calendar styling script is now obsolete, please refer to this post on how to style the new one.
This is now built into Calendar Icons v1.3, so you won't need this script (and I'm not sure if it'll work right if you have both running).


before
after



The Code

Ideally, add this code to a free form text/HTML content box on your calendar page or you can add it to your footer HTML.
<style type="text/css">
 .CalendarTopTools { text-align: right; }
</style>

<script type="text/javascript">
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(){
 if ($('#dFullCalToolsHeader').length){
  $('#dFullCalToolsHeader')
   .find('a[href*="calViewMyUpcoming"]')
    .attr('rel','200')
    .html('<img src="' + myEvents + '" alt="My Events"/>').end()
   .find('a.CalendarAdminAddEvent')
    .html('<img src="' + addEvent + '" alt="Add Event"/>').end()
   .html(function(i,h){ return h.replace(/•/g,'') }); // remove bullet
 }
})
</script>
Customizing
  • To change the icons, modify the URL (in orange) for the "myEvents" and/or the "addEvent" variables in the code above.
  • The calendar links are on the left side by default. You can move them to the right side (in blue).
Edit (12/20/2009): Updated the code to work with the new calendar
Edit (6/4/2010): Updated to remove the bullet between the images (it used to be a vertical line | )
TopBottom

Guppy Queen (New Admin) 10/9/2009 11:49 PM EST : RE: Calendar Control Icons
Guppy Queen
Posts: 41034
Zomgawsh Poster

Great feature Mottie! Question, if I want to make this into a .js is this right?

<script type="text/javascript" src="http://"></script>

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(){
 if ($('#tblMonthlyCalendarTable').length){
  $('div.pAll')
   .find('a[href*="calViewMyUpcoming"]')
    .attr({'rel':'200','title':'<b>My Events</b><br />Click to view events you have signed up for.'})
    .html('<img src="' + myEvents + '" alt="My Events"/>')
   .next('a[id*="lnkAdminAddEvent"]').html('<img src="' + addEvent + '" alt="Add Event"/>')
   .parent().find('b').html('');
 }
})
TopBottom

Mottie (MVP) 10/10/2009 10:12 AM EST : RE: Calendar Control Icons
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Guppy!

Yep, that should work 
TopBottom

Guppy Queen (New Admin) 10/10/2009 1:24 PM EST : RE: Calendar Control Icons
Guppy Queen
Posts: 41034
Zomgawsh Poster

Thanks Mottie
TopBottom

Mottie (MVP) 10/29/2009 5:10 AM EST : RE: Calendar Control Icons
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

The Calendar Icons v1.3 script is no longer being used. Please check out this post on how to style the new calendar.

This is now built into Calendar Icons v1.3, so you won't need this script (and I'm not sure if it'll work right if you have both running).
TopBottom

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