Brian Mains reviews the Telerik’s Scheduler component.

Introduction

The Telerik Scheduler component is an amazing component that brings the power of Outlook to web applications. This component allows a user to see a day, week, and month view of their appointments. It also has the ability to view the calendar entries throughout an entire 24 hour period (broken down into half-hour increments) or for only the current business hours (which you can configure).

Any user can insert or edit an appointment by clicking in a blank section of the scheduler, or by double-clicking an existing appointment. The times can also be changed by dragging the appointment, or by using the drag handle on the bottom of the appointment. The scheduler also comes with a pretty complex architecture.

Working with Appointments

All appointments are generated through an Appointment class. The Appointment class represents the subject, start/end date/time, and recurrence information for every appointment in the scheduler. These appointments can be instantiated directly and added to the scheduler’s appointments collection, or a range of appointments can be data bound directly to the control. For instance, appointments can be generated using the code in Listing 1.

Listing 1: Creating Appointments in Code

An alternative approach to loading appointments can be done using a DataTable object or some other data source. It doesn’t have to be a DataTable; the scheduler supports business object binding as well as LINQ entities. DataSourceControl objects are also supported. The data source, at the bare minimum, requires that an id, name, start date, and end date be provided; the recurrence rule and parent key is also required for recurring appointments; if not provided, the UI will not support recurring appointments. We’ll take a look at how it’s bound a little later.

The Appointment object defines the start and end of an appointment using the Start and End properties, which are DateTime objects; the scheduler makes use of both the date and time parts. To make an appointment reoccur repeatedly, the RecurrenceRange object specifies the time period that a recurrence takes place, whether it ends on a specific date or if it recurs X number of times. A RecurrenceRule object, the details about the actual rules for recurrence, comes with five derived classes that take a RecurrenceRange object and some other small details. An alternative approach is to use the RecurrenceRule.FromPatternAndRange method that takes a RecurrencePattern and RecurrenceRange object to generate the rule.

Repetition can be specified as hourly, daily, weekly, monthly, or yearly, and can end at a certain date or interval. You see that this rule is passed along to the Appointment as a string; the final result looks something like the following:

DTSTART:20081122T143000Z\r\nDTEND:20081122T170000Z\r\nRRULE:FREQ=WEEKLY;

UNTIL=20091021T040000Z;INTERVAL=1\r\n

Walkthrough

First, let’s take a walkthrough the appointment setup. Below shows the default calendar with an appointment bound to it.

Figure 1: Bound Scheduler

Appointments appear as a block, with the subject of the appointment in the upper-left. This is customizable if you supply the AppointmentTemplate property; for now, I use the default. Whenever you mouse over the scheduler, the mustard yellow selector denotes the timeslot that can currently be used to create a new appointment. If I were to have double-clicked where it currently resides, the scheduler would create a new appointment at the 11:30 AM to 12:30 PM time slot. If you want to adjust the time of an appointment, use the drag handle (the double-lines at the bottom center of the appointment template) to resize the appointment for the correct length.

Inserting an appointment inline looks like Figure 2.

Figure 2: Inserting an appointment inline

This form appears inline in the scheduler, in the specified time slot. Clicking the green checkmark saves the appointment, while clicking the red x removes it. Clicking the more link switches to advanced view. Advanced view takes up the entire interface of the scheduler and uses a complex form that allows the user to adjust the time, recurrence, and other settings.

Figure 3: The Advanced Form

Notice in the above screen that the Recurring appointment option is checked, which shows settings for recurrence below it, shown in Figure 4. This is all in the same section of form; I just happened to break it up into different screenshots.

Figure 4: Recurring appointments in advanced form

Telerik provides all of this functionality out of the box, giving the user the ability to recur an appointment on a daily, hourly, weekly, monthly, or yearly basis. The options it gives you are pretty advanced, and I’ll probably talk about them in a different article. It also provides the user the ability to specify when the appointment stops recurring (at a specified date or at a specific number of occurrences). Consequently, these forms you just saw are also used for editing appointments. The primary difference is that the existing data is already loaded into the application.

If you want to skip inline form and go directly to advanced insert/edit, set the StartEditingInAdvancedForm/StartInsertingInAdvancedForm property to true. This goes directly to the advanced form and bypasses the inline mode, eliminating the need to click the more button.

Deleting an appointment looks like the following.

Figure 5: Deleting an appointment

The appointment is deleted only when the OK button is clicked.

Scheduler Example

So what does the setup of the scheduler look like? The scheduler looks like the markup below.

Listing 2: Scheduler markup

The scheduler is bound to an object that has a property Subject (to denote the subject) and a bunch of other data-bound properties (noted by the Data prefix). The Scheduler has a lot of events that can be subscribed to; above, anytime the scheduler inserts, updates, or deletes an appointment, an event fires. This works nicely in a manual-binding scenario.

Some of the other useful events are:

• AppointmentCreated – When an appointment is created, before data binding.
• AppointmentDataBound – Fires whenever the appointment is data-bound with data.
• TimeSlotCreated – A time slot is created, not necessarily related to an appointment per se. It could be, however. This is every time slot that the mouse appears over: 8 AM – 9 AM time slot, 9 AM – 10 AM, etc.
• FormCreating and FormCreated – Whenever the advanced form displays, the form creating/created events fire. This makes it easy to tap into an existing form.
• NavigationCommand and NavigationComplete – Whenever the user navigates to a different date using the calendar, presses the previous/next buttons, or does one of the several other options, these events fire. NavigationCommand fires before the complete event fires.

In my scenario, I manually bound to the scheduler like so:

Listing 3: Binding to the scheduler

Because I manually bound the data source, instead of using a data source control, I have to override the insert, update, and delete events to write the appointment data to the database or other backend structure. Take a look at the code in Listing 4.

Listing 4: Updating the backend

The _manager variable is a data component that stores a list of business objects in cache; it’s a helper object in that way. The nice thing about the scheduler is that the Appointments collection is a state-managed collection and is retained across postbacks. These manipulation methods contain either an Appointment object (or ModifiedAppointment for the update method) with the user’s final data entry, and all that is needed is to pass the data off to the backend.

Custom Attributes

There are a couple of ways to add additional information to these templates; one of the ways is through the use of custom attributes. Custom attributes are setup by specifying the CustomAttributeNames property. By setting the EnableCustomAttributeEditing to true, custom attributes can be added to the advanced form automatically.

The form uses textbox controls to enter values; this isn’t always ideal, but in order to make advantage of some other user interface control, you have to implement your own custom template and create your own interface.

To setup custom templates, add to the markup:

Listing 5: Defining custom templates

Custom attributes add the following to the default template.

Figure 6: Custom Attributes

Custom attributes are accessible in the Insert, Update, and Delete events through the e.Appointment.Attributes collection.

Conclusion

This article looked into the scheduler and how it works. It examined some of the events, the basic structure, and some of the out-of-the-box features. Future articles will delve into these further.

About Brian Mains

Brian Mains is an application developer consultant with Computer Aid Inc. He formerly worked with the Department of Public Welfare. In both places of business, he developed both windows and web applications, small and large, using the latest .NET technologies. In addition, he had spent many hou... This author has published 61 articles on DotNetSlackers. View other articles or the complete profile here.

---

Discussion

Subject	Author	Date
Need urgent	Sohail Arshed	10/13/2009 7:50 PM
hi can you please mail me the complete source, i am getting confused on some points, as i am beginner :P please mail me smokepk@hotmail.com i shall be very greatful to you Reply | Permanent link
need code	Laslo Pastor	6/29/2010 3:53 AM
HI What you have done is peaty awesome, I try to do similar with custom Scheduler binder but I cannot managed to save a input parameters’.... Can you send me a code of your solution? My mail is plaslo@gmail.com Reply | Permanent link
RE: need code	Brian Mains	6/29/2010 6:33 PM
Hello, I'm not sure exactly what you are trying to accomplish, but there are some new features, if you are using a later version, to take advantage of.  One is using a provider class for all the interactions, demoed here: http://demos.telerik.com/aspnet-ajax/scheduler/examples/dbschedulerprovider/defaultcs.aspx If you provide some more specifics, I can help further. HTH. Reply | Permanent link

---

Please login to rate or to leave a comment.