Brian Mains

Catch me on linked in at: http://linkedin.com/in/brianmains, or follow me on twitter at: @brianmains.

RadScheduler Client-Side Capabilities Part 3: Appointment Templates

Unfortunately, client-side templates aren't present, at least with the 2010 Q1 Telerik release, and it doesn't seem like Q2 added it either.  So if you want to customize an appointment, be prepared to use JavaScript.  The key event is appointmentCreated, the client-side event when an appointment is, if you haven't guessed, just created.  The server-side AppointmentTemplate is ignored, so we need to add code to target the div.rsAptContent DIV element to add content to (FireBug came in handy to figure this out).  Using this DIV, we can append content like the following:

function apptCreated(sender, e) {
    var el = $(e.get_appointment()._domElements[0]).find("div.rsAptContent");
    $("<div/>").html("some value").appendTo(el);
    $("<div/>").html("another value").appendTo(el);

The e.get_appointment() reference refers to the JS object, not an element, but it has a collection of dom elements available via the _domElements collection.  Using find, I dug down through the HTML tree to find the appointment element.  Note: there may have been an easier way, but I had to rapidly add this feature, and this worked for me.  Please comment if there is a better way.

Using JQuery, I appended DIV's to this root element , which get appended to the element below the subject.  Note: you have to be careful of CSS here, that the appointment will clearly display.  Be mindful of the appointment height, and how much content gets displayed.

Posted: Sat, Aug 14 2010 21:45 by bmains | with no comments
Filed under: ,
Leave a Comment

(required) 

(required) 

(optional)
 

(required) 

If you can't read this number refresh your screen
Enter the numbers above: