calendarxp
Site Admin
Joined: 30 Jan 2005
Posts: 409
|
 Posted: Tue Feb 15, 2005 7:29 pm Post subject: How can I use overlib with the calendar to show event tooltips? |
 |
|
The following instructions were tested with overlib 4.17.
Before starting to integrate it with calendarxp, we need to fix a bug in it first (this bug may have been fixed in overlib 4.18+) -- please find the line 1157 in the overlib.js with the following code:
| Code: | | top = left = -10000 + (!olNs4) ? 'px' : 0; |
and change it to:
| Code: | | top = left = -10000 + (!olNs4 ? 'px' : 0); |
Now in order to integrate it in calendarxp we need to:
- Copy all overlib files into the same directory where the calendar engine files (iflateng.htm or ipopeng.htm) are located.
- Load the overlib scripts from within the engine by appending the following line to the end of plugins.js file:
| Code: | | fLoadScript("overlib.js"); |
Finally, we have 2 ways to use overlib tooltips: (you may use either one or both)
1st) To enable overlib on a specific HTML content in a date cell, we just need to invoke overlib() as usual from the onmouseover event. e.g.
| Code: | | fAddEvent(2005,5,21,"agenda tooltip","alert('overlib demo')","#87ceeb","dodgerblue",null,"gold", "<div><a href='javascript:void(0);' onmouseover=\"overlib('This is a overlib tip.')\" onmouseout=\"nd()\">over here</a></div>"); |
2nd) To replace the default tooltip of each agenda date with overlib tip, we need to:
- Append the following function to the end of plugins.js:
| Code: | function fOverLib(y,m,d) {
var ag=fGetAgenda(y,m,d);
if(ag&&ag[7])overlib(ag[7]);
}
gsDays="'<div onmouseover=fOverLib('+sCellDate+') onmouseout=nd()>'+dayNo+'</div>'"; |
Now the 11th parameter (named "etc" as in SDK doc) of each fAddEvent call is dedicated for overlib tooltips (because we check ag[7] in above code - means the 8th param of agenda array) and you may set the 4th one to empty string to avoid overlapping with the built-in tips. e.g.
| Code: | | fAddEvent(2005,5,21,"","alert('overlib demo')","#87ceeb","dodgerblue",null,"gold", null, null, "Overlib Tooltip"); |
Note that if you have already used the "etc" param of fAddEvent() for other purpose, you may simply override the fAddEvent() by adding the following code to plugins.js so as to make use of ag[8].
| Code: | function fAddEvent(y,m,d,message,action,bgcolor,fgcolor,bgimg,boxit,html,etc, etc2) {
var ag=gbShareAgenda?eval(gsAgShared):__agenda;
ag[y+"-"+m+"-"+d]=[message,fFilterNull(action),fFilterNull(bgcolor),fFilterNull(fgcolor), fFilterNull(bgimg),fFilterNull(boxit),fFilterNull(html), etc, etc2];
} |
_________________
Copyright 2003-2011 Idemfactor Solutions, Inc. All rights reserved.
Last edited by calendarxp on Thu Mar 08, 2007 12:41 am; edited 15 times in total |
|
FAQ
Search
Register
Profile
Log in to check your private messages
Log in
