The schandlr.js give you a method to have "onmouseover" and "onmouseout" and other scripts execute. The schandlr.js is a file within your selected them folder. It provides functions the following functions.
function |
calendar object |
javascript event |
fscCellOnMouseDown
| entire date cell
| on mouse down
|
fscCellOnMouseOver
| entire date cell
| on mouse over
|
fscCellOnMouseOut
| entire date cell
| on mouse out
|
fscCellOnMouseUp
| entire date cell
| on mouse up
|
fscNumberOnMouseDown
| date number
| on mouse down
|
fscNumberOnMouseOver
| date number
| on mouse over
|
fscNumberOnMouseOut
| date number
| on mouse out
|
fscNumberOnMouseUp
| date number
| on mouse up
|
fscEventOnMouseDown
| calendar event
| on mouse down
|
fscEventOnMouseOver
| calendar event
| on mouse over
|
fscEventOnMouseOut
| calendar event
| on mouse out
|
fscEventOnMouseUp
| calendar event
| on mouse up
|
Each function has the following arguments.
argument |
data type |
description |
e |
javascript event |
othe event triggering the call (onmouseover, onmouseout, etc...) |
obj |
DIV object |
reference to the DIV wrapping the calendar element |
m |
integer |
the month portion of the date of the object |
d |
integer |
the day portion of the date of the object |
y |
integer |
the year portion of the date of the object |
dte |
date |
a date varible constructed from m,d and y inside the function |
Imagine you want to react to a mouse moving over, and then away from a date number. First, you need to instruct the calendar to use the schandlr.js code. You do this by setting the "enableHandlers" property of the calendar in the scrptal.htm of your selected theme. For example...
objCal.enableHandlers = true;
You could add the following code to the schandlr.js functions to change the text color of the date number to red. We have reference to the DIV containing the text, so we adjust the style.
function fscNumberOnMouseOver(e, obj, y, m, d) {
var dte = new Date(y, m, d);
obj.style.color = "#ff0000";
};
And when the mouse moves away, the color goes to black.
function fscNumberOnMouseOver(e, obj, y, m, d) {
var dte = new Date(y, m, d);
obj.style.color = "#000000";
};
You could do the same for an event, just using the fscEventOnMouseOver and fscEventOnMouseOut functions instead.
You could choose to react only to certain dates as well.