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"
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; }
// 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 = '';
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...