Event Widget - Add Signups to Tooltip

GuildPortal admin site link to the original post

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.

*NOTE* This script does require you to have the modified tooltip script installed.

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 & added a note about requiring the modified tooltip script.
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.

Hi Midori!

Hehe, nice try, but the sort parameter in the url isn't related to this script at all, sorry. Anyway, I've updated the script to add a "hideSignedUp" variable. I've added a few others, just in case (see the list in the top post.

www.daevasofpoo.guildportal.com

I've entered the code as in a Free Form Text/HTML widget on the Home page in order to apply the tooltips to the Events Widget on the left.
At the moment I'm getting cream text on a white background making it pretty difficult to read. Would this be due to the template/theme im using or do I need to add text and background colour code?

Thankyou Mottie!

That was spot on, don't know how I missed that I must have overlooked it if it was cross referenced in one of your tutorials on the guildportals site.

Hey Mottie, how would I go about making the tooltip display color-coded by signup status, like the setup you have on the calendar here?