Skip to main content
Kinetic Community

Click Handlers

Click handlers introduce custom functionality when a user clicks on something in the calendar.  Instead of running the default functionality, the instructions defined in the click handler are executed instead. A click handler defined in the event type configuration will enable a click handler on all events for this event type.  Kinetic Calendar will execute the defined click handler instructions instead of retrieving and displaying the event details in a popup window. A click handler defined in the calendar configuaration will enable a click handler for the day and week views.  This will allow Kinetic Calendar to execute a javascript function or open a URL when the user clicks in any open time slot in the calendar day or week 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.  This is defined by setting the click handler 'type' property to the desired value: "url" or "js".

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

 

Event Properties

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

 

Property Name Description
calendarId The unique ID of the calendar this event belongs to
calendarName The name of the calendar this event belongs to
typeId The name of the event type this event belongs to
id The unique event ID
name The event name
description The event description
start The date/time the event starts, relative to the user's timezone
end The date/time the event ends, relative to the use's timezone
startGMT The date/time the event starts, relative to GMT
endGMT The date/time the event ends, relative to GMT
allDay Indicates if the event is an all day event or not - true if all day, false if not all day
filterFields['Name of Filter'] A filter mapping field defined in the event type configuration.  The name in the square bracket must match the name property of the filter mapping. 

 

Calendar Properties

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

Property Name Description
name The calendar name
id The unique calendar Id
description The calendar description
status The calendar status - Active or Inactive
defaultView The default view used when rendering the calendar - Day, Week, Month, or List
displayPage The display page used when rendering the calendar
fixedTimezone The name of the timezone this calendar uses to display all events, if this calendar uses one
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)
clickedTimeZone The time zone id that was used when the user clicked the open calendar time slot (Olson Timezone ID, so America/Chicago as an example)

 

An example clickhandler 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 clickhandler 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}}",
        "timezone": "{{clickedTimeZone}}",
        "duration": 60,
        "calName": "{{name}}",
        "calId": "{{id}}",
        "calDesc": "{{description}}"
    }
}
 
 

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

  • startDate
  • startTime
  • startDateTime
  • timezone
  • duration
  • calName
  • calId
  • calDesc

 

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.

 
Clickhandler-Calendar.png