Skip to main content
Kinetic Community

Javascript Click Handler

A Javascript click handler will execute a predefined javascript function instead of retrieving the event details and displaying the event detail popup window.  The entire event object is passed as the first parameter to the javascript function, so all the core event properties and filter mappings that have been configured on the event type are available to use in the javascript function.   "clickHandler": { "type": "js", "callback": "KD.example.handler.ShowEvent" }   JS click handler properties: Property Name Required? Description type Yes Defines the type of click handler so Kinetic Calendar 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.

Javascript Files

When using the default theme, the /themes/default/resources/js/theme.js file is loaded with the default calendar page.  Any javascript code that exists in this file will be loaded and available as well.  When writing javascript click handlers, this is a good place to write your click handler functions as they will be loaded when your calendar loads.  

If you are using a custom theme, 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 calEvent - the clicked event object (not the element on the page, but the actual event)
 */
KD.example.handler.ShowEvent = function ( calEvent ) {
    alert(YAHOO.lang.dump(calEvent));
}
 
Results of executing the ShowEvent click handler:
Detail-js-showEvent.png
 
 
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, looking at the image above, you can see the event name property can be accessed in the javascript function by accessing the event variable's name property.  Since the event variable in this function is called calEvent, this looks like calEvent.name, or calEvent['name'].  All of the other event properties can be accessed in the same way.
 

Available Event Properties

For a list of available Event properties that can be accessed from the event object, please see Event Properties.