Skip to main content
Kinetic Community

Click Handlers for Kinetic Calendar

 

Notes

This functionality was "enhanced" in Kinetic Calendar 2.0. You now can define ClickHandlers as part of the event configuration or Calendar configuration. The notes in this article are for "Prior to Kinetic Calendar 2.0"

 

How to build and configure "click handlers" to redirect Kinetic Calendar to Kinetic Request for viewing or editing an existing Calendar event.   This is typically done to give a simplified interface to existing Change Management events.

Usage

In order to implement this capability - the kinetic.js file must be modified.

The file can be found on the webserver hosting Kinetic Calendar, the typical location is: webapps/KinCal/js/kinetic.js

 

The function to be modified (roughly line 1500 of the kinetic.js file):

editEvent:function(e,opts)

 

We want to change the logic.

Original:

1) Read the event clicked

2) If no event found - put out an alert message and exit

3) Open the event in the standard Kinetic Calendar viewer and exit

 

New process:

1) Read the event clicked

2) If no event found - put out an alert message and exit

3) (If our event) open in our custom viewer and exit

4) Open the event in the standard Kinetic Calendar viewer and exit

 

 

Original:

            // find event in calendar cache
            var event;
            for(var cCal in evtCache)
            {
                for(var evtdt in evtCache[cCal])
                {
                    if(evtCache[cCal] && evtCache[cCal][evtdt])
                    {
                        if(evtCache[cCal][evtdt][typeId] && evtCache[cCal][evtdt][typeId][id])
                        {
                            event = evtCache[cCal][evtdt][typeId][id];
                            break;
                        }
                    }
                }
            }
            if(!event)
            {
                alert(Lang.eNotFound);
                return;
            }
            currEvent = event;
            currEventType=event.type;
            // if calendar isn't writable, hide save/delete buttons
            var iswritable = isEventEditable(event);
            // clear the panel for now and then worry about
            // populating it after the callback
            $('furl').value = '';
            $('urllink').href = '';
            $('urllink').style.display = 'none';
            $('relateditems').value = '';

 

 

New logic: add your custom logic to execute and return from the editEvent before the standard viewer will execute.

 

            // find event in calendar cache
            var event;
            for(var cCal in evtCache)
            {
                for(var evtdt in evtCache[cCal])
                {
                    if(evtCache[cCal] && evtCache[cCal][evtdt])
                    {
                        if(evtCache[cCal][evtdt][typeId] && evtCache[cCal][evtdt][typeId][id])
                        {
                            event = evtCache[cCal][evtdt][typeId][id];
                            break;
                        }
                    }
                }
            }
            if(!event)
            {
                alert(Lang.eNotFound);
                return;
            }
  
 
Inserting my logic here:
(this will open a new window to demo.kineticdata.com ... passing the event.requestId as a parameter)
 
   
   // ADDED Custom Click Handler
   if (event.calendarName == "Sithco Sample Scheduled Changes") {
window.open("http://demo.kineticdata.com/kinetic/DisplayPage?name=Change_Viewer&eventID="+event.requestId, "_blank");
return;
   }
 
 
Continue the original: 
 
            currEvent = event;
            currEventType=event.type;
            // if calendar isn't writable, hide save/delete buttons
            var iswritable = isEventEditable(event);
            // clear the panel for now and then worry about
            // populating it after the callback
            $('furl').value = '';
            $('urllink').href = '';
            $('urllink').style.display = 'none';
            $('relateditems').value = '';

 

 

 

 

 

Example

This is the end result...

 

        editEvent:function(e, opts)
        {
            // reset the display fields
            $('exttimerange').style.display = "none";
            var id = opts.id;
            var typeId = opts.typeId;
            // find event in calendar cache
            var event;
            for(var cCal in evtCache)
            {
                for(var evtdt in evtCache[cCal])
                {
                    if(evtCache[cCal] && evtCache[cCal][evtdt])
                    {
                        if(evtCache[cCal][evtdt][typeId] && evtCache[cCal][evtdt][typeId][id])
                        {
                            event = evtCache[cCal][evtdt][typeId][id];
                            break;
                        }
                    }
                }
            }
            if(!event)
            {
                alert(Lang.eNotFound);
                return;
            }
        
   // ADDED Custom Click Handler
   if (event.calendarName == "Sithco Sample Scheduled Changes") {
window.open("http://demo.kineticdata.com/kinetic/DisplayPage?name=Change_Viewer&eventID="+event.requestId, "_blank");
return;
   }
   
            currEvent = event;
            currEventType=event.type;
            // if calendar isn't writable, hide save/delete buttons
            var iswritable = isEventEditable(event);
            // clear the panel for now and then worry about
            // populating it after the callback
            $('furl').value = '';
            $('urllink').href = '';
            $('urllink').style.display = 'none';
            $('relateditems').value = '';
            if(iswritable)
            {
                updateFormFields(true);
                $('btnsave').style.display = '';
                $('btndeletecover').style.display = '';
                KD.calendar.panel.updateRelatedMenu(event, event.type);
            }else{
                updateFormFields(false);
                $('btnsave').style.display = 'none';
                $('btndeletecover').style.display = 'none';
            }

// etc...