Introduction
About ten years ago I did some work for a Canadian software company. One of my objectives was to replicate a calendar control, approximating the look, feel, and behavior of Microsoft Outlook. The target language was Delphi. At the time, as far as we knew there were no third party controls available to plug in. Everything had to be fabricated from scratch. After many days it was clear that this was a much bigger job than anyone had anticipated.
Replicating the look and feel of something as detailed as Outlook—multiple calendar views, shared schedule items, detailed graphic rendering, data storage, and much more—takes some time. For one person it is a big job.
Unfortunately, recording events by date and time is one of the central elements of modern society. Time and appointments are how we know where to be, what to be doing, when it’s time to get paid, or visit the dentist. Almost everyone marks time and events using a calendar. Unlike me you don’t have to try to figure out the vast and varied intricacies of drawing, painting, storing, and calendar-based events. The ASPxScheduler control (for ASP.NET) handles all of the plumbing, includes sub-controls for editing and adding recurring appointments, has built-in Ajax support, and already knows how to work with data persistence.
This article is an introductory presentation of the ASPxScheduler Control from Developer Express.
Introducing the ASPxScheduler Control
The ASPxScheduler Control is a very feature rich control. Out of the box—see Figure 1—it comes with a navigator, a view selector, a resource navigator, navigation buttons, and the ability to add appointments that that have shared time slices. The features you see in Figure 1 represent the basic view you get when you put the ASPxScheduler control on a Web page.
Figure 1: The ASPxScheduler control’s default view, which includes sub-controls for managing appointments added to your project.
When you add the ASPxScheduler to a Web project additional forms for editing appointments, recurring appointments, reminders, and navigating to dates are added to your project. The biggest chore you have is to associate a data source with the scheduler. The data source doesn’t have to come with a prescribed schema; instead you map your data types (or DB schema) to the existing storage types in the ASPxScheduler. Figure 2 shows a sample program at runtime with scheduled appointments. (Some additional graphics later in the article show some of the sub-forms that ship with the ASPxScheduler.)
Figure 2: The ASPxScheduler at runtime with some scheduled appointments.
Binding a Database to the ASPxScheduler
The ASPxScheduler separates presentation from data storage. The data storage comes in two parts: appointments and resources. The appointments storage stores (as implied by the name) the data representation in a calendar item. The resource storage contains information about whom or what a calendar item is associated with. The separation of resources and appointments can be thought of as a normalization of these two data elements.
You can use whatever data you’d like to store calendar items and represent resources, but there is no way that the DevExpress programmers might know in advance what that data will be. This means you have to map your data sources fields or properties to the pre-existing appointment fields and properties. (The ASPxScheduler supports custom values too, but I will leave that for another time.) The existing appointment and resources fields are represented by the graphics in Figures 3 and 4 (taken from the help documentation).
Figure 3: The appointment fields to map your data source to.
Figure 4: The resource fields to map your resources to.
To demonstrate binding data to the ASPxScheduler I will use the CarsDB.mdb MS Access demo database that ships with the Developer Express ASP.NET controls. If you don’t have a copy of that database you can of course replicate the schemas shown in Figure 3 and 4 which will give you a one to one mapping to the ASPxScheduler’s fields.
For the sample application add an ASPxScheduler control to a Web page and follow these steps:
- Click on the ASPxScheduler’s Smart tags menu and select the Appointments Data Source
- Using the Data Source Configuration wizard select the Access Database data source
- Click Next
- Browse to the CarsDB.mdb database and click Next
- For the Appointments data source select the CarsScheduling table and the ID, CarId, Status, Subject, Description, Label, StartTime, EndTime, Location, AllDay, EventType, RecurrenceInfo, and ReminderInfo
- On the Configure the Select Statement click the Advanced button and check Generate INSERT, UPDATE, and DELETE statements.
- Click OK
- Click Next.
- Click Finish.
Figure 5: Configure the CarsScheduling table for the Appointments data source.
After you have repeated steps 1 through 7 view the ASPX and modify the InsertCommand and InsertParameters, by removing the [ID] parameter. The value for [ID] on insertions will be added programmatically. (Remember to remove the [ID] column from the insert field names and the extra ? from the VALUES clause.
Repeat steps 1 through 7 to configure the Resources Data Source. This time select the Cars table and just the ID and Model fields. You don’t need to generate the INSERT, UPDATE, and DELETE SQL for the resource data source.
After you run the Configure Data Source wizard the ASPxScheduler will be associated with two data source components, in this example two Access Database data sources. Because the field names don’t match precisely you will need to run the mappings wizard to associate the CarsDB table’s fields to the named fields that the ASPxScheduler expects. There is a wizard for this too.
To map the CarsDB fields to represent Appointments click the ASPxScheduler Smart tags and in the section with the Appointments Data Source click Mappings Wizard…menu item. This will display the Setup Appointment Storage dialog (see Figure 6). The names on the left represent the names of values that the ASPxScheduler uses and the names on the right are the fields from your data source. The wizard makes a guess at the mappings based on the source names and types. The closer the mappings are the better the result of the guess. If you click the Generate button then the wizard will re-generate mappings. If you click Clear then the mappings are cleared. If you want to adjust the mappings then pick a new field from the dropdownlist for each mapped item. (If you want to create custom mappings then click Next and define custom field mappings.) When you are finished click Finish. Again, from the Smart tags menu item you can select Check Mappings to see if the mappings will work with the scheduler fields.
Figure 6: The mappings wizard helps you associate ASPxScheduler fields (left column) to your fields (right column).
Repeat the mappings for the resources table by mapping the CarsDB Cars.ID field to the ResourceId field and the Cars.Model field to the CarsDB Cars.Model. Now with a little code behind to handle the insertion of new data you have a functional event-calendar management sub-system.
Handling Adding Appointments
In the CarsDB.mdb database the ASPxScheduler.AppointmentId is mapped to the unique identifier ID. Because the CarsDB.ID field (in this case) is defined as a unique, auto-incremented ID it will be assigned a value when the row is inserted from the database. To make sure that AppointmentId is updated after inserts you need to grab the identity value assigned after insertion and update the AppointmentId value for that calendar item. ASPxScheduler and AccessDataSource insert events have been defined to request the insert row’s database identity (see Listing 1).
Listing 1: Update the ASPxScheduler’s (calendar items) AppointmentId value by reading the @@IDENTITY from the database.
private int lastInsertedAppointmentId;
protected void ASPxScheduler1_AppointmentRowInserting(object sender, DevExpress.Web.ASPxScheduler.ASPxSchedulerDataInsertingEventArgs e)
{
e.NewValues.Remove("ID");
}
protected void AccessDataSource1_Inserted(object sender, SqlDataSourceStatusEventArgs e)
{
OleDbConnection connection = (OleDbConnection)e.Command.Connection;
using (OleDbCommand cmd = new OleDbCommand("SELECT @@IDENTITY", connection))
{
this.lastInsertedAppointmentId = (int)cmd.ExecuteScalar();
}
}
protected void ASPxScheduler1_AppointmentRowInserted(object sender, DevExpress.Web.ASPxScheduler.ASPxSchedulerDataInsertedEventArgs e)
{
e.KeyFieldValue = this.lastInsertedAppointmentId;
}
protected void ASPxScheduler1_AppointmentsInserted(object sender, DevExpress.XtraScheduler.PersistentObjectsEventArgs e)
{
int count = e.Objects.Count;
System.Diagnostics.Debug.Assert(count == 1);
Appointment apt = (Appointment)e.Objects[0];
ASPxSchedulerStorage storage = (ASPxSchedulerStorage)sender;
storage.SetAppointmentId(apt, lastInsertedAppointmentId);
}
The field lastInsertedAppointmentId is used to store the repalcement id between event calls. The ASPxScheduler.AppointmentRowInserting event removes any values associated with ID. The AccessDataSource.Inserted event uses the ASPxScheduler’s Command.Connection value to select the last @@IDENTITY value—the auto-incremented key. The identity is assigned to the lastInsertedAppointmentId field. ASPxScheduler.AppointmentRowInserted assigns the local field lastInsertedAppointmentId to e.KeyFieldValue. Finally, the local field lastInsertAppointmentId is used to set the ASPxScheduler’s Storage object’s AppointmentId value for the newly inserted appointment. Listing 2 contains the ASPX for the demo showing the actual declarative SQL and parameters used for the demo.
Inserting Appointments
Run the demo to manage some appointments. If you right click on a location in the ASPxScheduler and click New Appointment then the Appointment dialog (see Figure 7) will be displayed. The Resource dropdown has values from the resources data source. The Label dropdown will change the appearance of the appointment, you can add a reminder, or check recurrence to display and configure a recurring appointment (see Figure 8).
Figure 7: Configure an appointment by right clicking on the calendar and pre-selectingfrom one of the available options, in this case New Appointment.
Figure 8: If you want to create a recurring appointment click Recurrence and configuring the recurring appointment section (shown).
Recurring appointments are automatically supported. In our example the compact data representing a recurring appointment will be stored in the RecurrenceInfo string field.
Thus far I have covered ASPxScheduler basics. There is a lot more to that scheduler than what was introduced here. There is support for all day appointments, reminders, changing the view, and searching for appointments. You can also customize the appearance of the ASPxScheduler with skins and styles. What is important is that with a tiny bit of code and field mapping the ASPxScheduler provides you with a fully oeprational calendaring/scheduling sub-system for ASP.NET.
Summary
The ASPxScheduler from Developer Express is an advanced control that really represents a comprehensive Microsoft Outlook-style calendar/scheduling sub-system for the Web. Associate two data sources—one for appointments and one for resources—with the ASPxScheduler and map your fields to the schedulers field and you have a fully operational Web calendar.
What I didn’t have time to cover—but it is covered in Developer Express’ upcoming book Professional DevExpress ASP.NET Controls from Wrox—is that the ASPxScheduler can be associated with custom objects (as well as database data sources) and there are several customizations, like using styles or creating custom input templates, to change the appearance, behavior, and stored data of the ASPxScheduler control. (There are dozens of examples, including some more ASPxScheduler demos) as well as some free Web controls available for you to check out at www.devexpress.com.)
Biography
Paul Kimmel is the VB Today columnist for www.codeguru.com and has written several books on object-oriented programming and .NET. Look for his upcoming book Professsional DevExpress ASP.NET Controls from Wrox Press. Paul is a consultant to Developer Express. You can contact him at paulk@devexpress.com.
