Skip to main content

IMPORTANT - Product End of Life Statement - IMPORTANT

Request RE, Survey, and Calendar 1.5 Support Ending December 31, 2020
Contact Kinetic Data Support with Questions
Kinetic Community

Click Handlers

Click handlers introduce custom functionality when a user clicks on something in the schedule.  Instead of running the default functionality, the instructions defined in the click handler are executed instead.


A click handler defined in the data source configuration will enable a click handler on all events for this data source.  Kinetic Schedule will execute the defined click handler instructions instead of retrieving and displaying the event details in a dialog window.

A click handler defined in the calendar configuaration will enable a click handler for view container.  This will allow Kinetic Schedule to execute a javascript function or open a URL when the user clicks in any open time slot in the schedule view.

Any number of parameters may be defined to send additional information to the javascript function or URL.


Types of Click Handlers

A click handler can be defined as either a URL click handler, or a Javascript click handler.  A URL click handler opens the web browser to a URL, and a Javascript click handler runs a pre-defined javascript function.

Please see the URL Click Handler page or the Javascript Click Handler page for details about the different click handlers.


Click Handler Configuration

The configuration properties for click handlers vary depending on what type of object the click handler is associated with (calendar or data source).  But the basic configuration properties that all click handlers share is as follows:


"clickHandler": {
    "type": "typeValue - Either js or url",
    "callback": "callbackValue - js function or url",
    "target": "targetValue - ** URL click handler ONLY - either _blank or _self",
    "parameters": {
        "name1": "value1",
        "name2": "value2"



The type property indicates whether the click handler should execueta a javascript function, or open a web browser to a URL.

Possible values are: "js" or "url"



The callback property depends on the type of click handler.  For a javascript click handler, the callback must be the name of a javascript function that is loaded when the page is rendered.  For a URL click handler, the callback is the base URL that will be opened in a web browser.



The target property is only used for URL click handlers, and specified if the web browser should open the URL in a new browser window or tab (_blank), or in the current browser window or tab (_self).



Parameters are a way to send information to the click handler callback.  This information can be specific to the object that was clicked, or hard-coded static values.

Parameters consist of a list of name/value pairs.  The name portion will simply be the name of the parameter passed to the callback, and the value may be static text, data from the object, or a combination of both.

The number of properties that can be passed to the callback is unlimited.  Simply comma-separate each name/value pair in the list.


Static Parameters

Static parameters simply contain hard-coded values that will be passed to the callback.  The value is sent to the callback as it is written, there is no property substitution with static parameters.  An example of a static parameter is:

"duration": 60


Dynamic Parameters

Dynamic parameters contain the names of object properties that the application dynamically substitutes with the corresponding property value of the object that the user clicked.  Properties that are to be substituted dynamically must be wrapped in double curly braces such as:

"parameterName1": "{{propertyName}}"

Please see the sections below for a comprehensive property list for each type of object that can be used as dynamic parameters.


Mixed Parameters

Mixed parameters contain both static text and dynamic properties.  The static portion is sent as is, and dynamic portion is substituted with the object's property value.  An example of a mixed parameter is:

"parameterName1": "Mixed value - {{propertyName}}"


Event Properties

The event properties that are available to use consist of the core event fields, and any filter mappings that have been configured on the data source.


Property Name Description
sourceMapResourceId The unique key value of the resource this event is related to
sourceMapDatasourceValuesKeyId The unique key value of this event
sourceMapName The event name
sourceMapDescription The event description
sourceMapStart The event start date/time
sourceMapEnd The event end date/time
filterFields['Name of Filter'] A filter mapping field defined in the data source configuration.  The name in the square bracket must match the name property of the filter mapping. 


Calendar Properties

This is a list of the properties that are available to use in the calendar click handler parameters.

Property Name Description
uuid The unique calendar Id
webname The unique calendar webname
name The calendar name
description The calendar description
clickedDate The date of the point where the user clicked the open calendar time slot (yyyyMMdd)
clickedTime The time of the point where the user clicked the open calendar time slot (HH:mm)
clickedDateTime The date/time of the point where the user clicked the open calendar time slot (yyyyMMddTHH:mm)


An example click handler from a calendar configuration file.  In this example, an object that contains eight parameters will be sent to the KD.calendar.Theme.exampleShowParameters javascript function.  If the click handler was a URL type of handler, the parameters would be evaluated and sent on the URL as query string parameters.


"clickHandler": {
    "type": "js",
    "callback": "KD.calendar.Theme.exampleShowParameters",
    "parameters": {
        "startDate": "{{clickedDate}}",
        "startTime": "{{clickedTime}}",
        "startDateTime": "{{clickedDateTime}}",
        "duration": 60,
        "name": "{{name}}",
        "id": "{{id}}",
        "description": "{{description}}"

The parameters can be named anything, but in this example they are named:

  • startDate
  • startTime
  • startDateTime
  • duration
  • name
  • id
  • description


These parameters can be used in the callback handler for any purpose.  The example javascript function just displays an alert message that shows the parameter names and values.