Scriptcalendar.com
An Incredible Javascript Event Calendar

User Guide

»  Table Of Contents

Reacting to OnMouseOver

Section 2.5.0

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.

»  Table Of Contents