Click Handlers
URL click handler or Javascript click handler
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".
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 time zone |
| end | The date/time the event ends, relative to the use's time zone |
| 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.
