I’ve been working with the client-side API for the RadScheduler component, and there are a lot of great features added through support via web services.  Most, not all of the functionality you can perform on the server is now available in the client, which is done using client-side JavaScript and a web service.  I’m going to focus on updates related to appointments in the scheduler.  Appointments are represented by a client-side appointment object, as you can imagine.  It has options to specify the title, description, start and end date, etc.

The key driver for affecting the appointment is the AppointmentCreated client-side event, which fires once everytime an appointment is added to a time slot(s).  Because the scheduler doesn’t have a client-side binding template (the AppointmentTemplate property is server-side only), any custom UI must be manually created.  The approach I took to doing is to get the root element that displays the UI.  I use JQuery to get this:

var appt = e.get_appointment();
var el = $(appt._domElements[0]).find(“div.rsAptContent”);

Next, I append content or elements to the root also using JQuery.  You can pretty much inject what you like, as you have full control..  Be aware that the appointment has height restrictions that may cut off or cause funny behavior with your template if you are not careful.  I chose to append additional content, which appends to an inner div for the appointment.

$(el).append(“<div>Some other content</div>”);

And this gets rendered in the UI.  You can even render HTML elements and listen for their click event, which is an especially handy feature.  It is at this point that you can also set a tooltip for the appointment via the following line:

appt.set_tooltip(“My new tooltip”);

But sometimes, to generate this information, you need the additional bound information attached to the template; for instance, templates may have custom attributes or resources that you need to gather the information from and bind in the UI for a more informational display.  The appointment object also has access to this information; the following example pulls the attributes for an appointment and uses it below.

var attrib = appt.get_attributes().getAttribute(“AttribName”);
appt.set_tooltip(“Attrib: ” + attrib);

The nice feature of attributes is that when you query the data from the backend and generate the appointments for the web service, you can programmably create additional attributes.  This is something I’ll touch upon later, but its great that you can pass custom information through attributes for ease of use.

When learning about various objects, Firebug comes in very handy, because it’s hard to figure out the API.  Telerik’s documentation isn’t complete and as such, you have to do a lot of trial and error and debugging to figure out the complete API.  Oftentimes, especially with the appointment, most of the objects that have collections use the same approach as above, where there is a get_attributes() property to return a collection, followed up by a getAttribute method to get a specific attribute by key.  In  some cases, its easier to access the private variable directly (some collections have a _data collection of data items), because I didn’t have the time to figure out the method to call.