Skip to main content
Kinetic Community

Javascript Click Handler

A Javascript click handler will execute a predefined javascript function.  The entire object is passed as the first parameter to the javascript function, so all the core object properties and filter mappings that have been configured on the object are available to use in the javascript function.   "clickHandler": { "type": "js", "callback": "KD.example.handler.ShowEvent", "target": "_blank", "showDialogFirst": "false", "parameters": [ ] }   JS click handler properties: Property Name Required? Description type Yes Defines the type of click handler so Kinetic Schedule knows how to process it.  Must be "js" for Javascript click handlers. callback Yes The name of the function that will be executed.  The event object is passed as the first parameter to the function.  Inline javascript is not supported, it must call an existing function.   target Yes Not used, but it is required to be present.  Value must be either "_self" or "_blank" showDialogFirst Yes A value of "true" will display a confirmation user to the user before running the clickhandler.  A value of "false" will run the clickhandler immediately without prompting the user. parameters Yes Indicates the values sent to the clickhandler.

Javascript Files

Any custom click handler javascript code must be added to a javascript resource file, and this javascript file must be loaded from the JSP that Kinetic Schedule uses to render the schedule.  Any javascript code that exists in this file will be loaded and available as well.

You will need to ensure your function is loaded when the calendar page loads.

 

Example

/*****************************************************************************************
* Namespace setup
* This creates the namespaces for functions used in this appication.
* This only needs to be done once.
*
****************************************************************************************/
if (!KD.example) {
    // create the KD.example namespace if it doesn't already exist
    KD.example = {};
}
if (!KD.example.handler) {
    // create the KD.example.handler namespace if it doesn't already exist
    KD.example.handler = {};
}
/*****************************************************************************************
 ** Custom Click Handler functions
 ****************************************************************************************/
/**
 * ShowEvent click handler
 * This click handler is fairly simple as it just displays the event object's property
 * names and values.
 *
 * @param dsEvent - the clicked event object (not the element on the page, but the actual event)
 */
KD.example.handler.ShowEvent = function ( dsEvent ) {
    alert(YAHOO.lang.dump(dsEvent));
}
 
Admittedly this example doesn't do much other than to dump the event details into a javascript alert window, but it serves to illustrate how a javascript click handler can be defined, and what information is available.  For instance, in this example the event name property can be accessed in the javascript function by accessing the event variable's sourceMapName property.  Since the event variable in this function is called dsEvent, this looks like dsEvent.sourceMapName, or dsEvent['sourceMapName'].  All of the other event properties can be accessed in the same way.
 

Available Object Properties

For a list of available object properties that can be accessed, please see the object property lists defined on the click handlers page.