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 : Voodoo Tech and Scripter's Den of Scriptniquity > Event Widget - Add Signups to Tooltip
Mottie (MVP) 4/5/2010 1:51 AM EST : Event Widget - Add Signups to Tooltip
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Event Widget - Add Signups to Tooltip

This script allows you to preview the calendar event signup table from the event widget or the main calendar! You can see exactly what it does in the screenshots below:

Events (Before) Events (After)

 Calendar

This script was added on to the same external file as the Events Widget - Hiding Elements script to reduce the number of files you need to load. Also, this makes adding it to your site very simple. Add the following script to a Free Form Text/HTML type widget on the same page as your Calendar and/or Event Widget (make sure the editor is in "Raw/Script" mode!), or add it to your Footer Area (Control Panel > Custom HTML & Script > Footer Area) to cover your entire site.

Script
(basic setup using all default values)
<style type="text/css">
#tooltip .signups td { padding:
5px; }
/* event signup status coloring */
.Alternate, .Alternate a:link { color: #ff8000; }
.Available, .Available a:link { color: #00dd00; }
.Cancelled, .Cancelled a:link { color: #dd0000; text-decoration: line-through; }
.Confirmed, .Confirmed a:link { color: #0080dd; }
.Tentative, .Tentative a:link { color: #888888; }
.WaitList,  .WaitList a:link  { color: #dd00dd; }

</style>
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/events-posts-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  /* add signup info to event tooltip */
 showSignups();
})
</script>
Script
(using hiding elements script to hide events that are too far in the future. It also shows all the options for this add signups to tooltip script)
<style type="text/css">
#tooltip .signups td { padding:
5px; }
/* event signup status coloring */
.Alternate, .Alternate a:link { color: #ff8000; }
.Available, .Available a:link { color: #00dd00; }
.Cancelled, .Cancelled a:link { color: #dd0000; text-decoration: line-through; }
.Confirmed, .Confirmed a:link { color: #0080dd; }
.Tentative, .Tentative a:link { color: #888888; }
.WaitList,  .WaitList a:link  { color: #dd00dd; }

</style>
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/events-posts-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 /* hide events more than 3 months in the future */
 hideNewEvents({
  hideNewMonths:
3,   // hide events more than x # of months in the future
  hideUser:     
true // hide the user that added the event
 });
 
/* add signup info to event tooltip */
 showSignups({
  loadingImage : 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/loading6.gif',
  tooltipWidth : 350,   // Set width of the tooltip
  hideGPUser   : false, // Hides GP User column, if set to true
  hideStatus   : false, // Hides Status column, if set to true
  hideRole     : false, // Hides role being filled, if set to true
  hideSignedUp : false
, // Hides Signed Up column, if set to true
  hideAdmin    : true// Hides Admin block, if set to true
  showTotal    : false, // Shows total number of signups

  styleRow     : false  // Event status add style to entire row, if set to true
  });
})
</script>
Customizing
  • Please refer to the Events Widget - Hiding Elements post for additional information on how to customize setting for that script
  • In the CSS, you can add more or less padding to "#tooltip .signups td" (number of pixels in red). There isn't a different class for each table column, so setting the width may not be the best idea. The sign up table is wrapped in a div with the class "signups" so you can add styling as you desire (e.g. background color/image).
  • Change the loading image by adding "loadingImage" in the format seen above. Change the URL in orange to point to your image.
  • Adjust the tooltip width as needed. Make it wider if the contents overflow outside the tooltip wrapper, or more narrow if you decide to hide the role column. Change the number in red to adjust the tooltip width in pixels.
  • If your guild doesn't use the role filled status, then you can hide it by setting the "hideRole" value to true (in red).
  • I've updated the script, so you can now hide the GP user column, Status column and/or Signed up column by setting the appropriate variable to true (also in red).
  • Row styling has been added, change the "styleRow" variable to switch the row styling from the status only to the entire row. You also need to include the CSS for it to work.
Edit (4/5/2010): This script now works with the main calendar. Added a screen shot. You only need to include the script on the calendar page as well as the event widget page (just once if they are both on the same page).
Edit (4/6/2010): Added more variables so you can hide other columns in the tooltip.
Edit (4/8/2010): Added event status styling. All you need to do is add the CSS & change the "styleRow" variable.
Edit (7/2/2011): Added showTotal which adds the total number of signups to the top of the tooltip.
TopBottom

Mottie (MVP) 4/5/2010 6:49 PM EST : RE: Event Widget - Add Signups to Tooltip
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Updated the code so it will now work with your main calendar as well!
TopBottom

shadowstts (Guild Admin) 4/8/2010 3:38 AM EST : RE: Event Widget - Add Signups to Tooltip
shadowstts
Posts: 364
Fingers of Fury!

well i treyed the code and now its messe diwht my other codes D: caus eom [bleep]ing dum and put in osme widget as my other codes D: 

update just relised i priobly shoudnt have posted this rpely lol

Asylum RULES!

TopBottom

Mottie (MVP) 4/8/2010 4:48 PM EST : RE: Event Widget - Add Signups to Tooltip
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

The script has been updated to add sign up status coloring.

If you want to use this option, add the sign up status CSS now included in the original post, then add "stlyeRow: true" to the function if you wish to colorize the entire row.
TopBottom

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