Building an Event Calendar Web ApplicationBy Paul Apostolos
Recently, I was asked by my company's staff marketing committee to develop an application to track our marketing efforts. Their requirements were simple (to them, that is):
- Graphically display all marketing campaigns/opportunities in a calendar type interface.
- Display different types of marketing efforts differently so the committee could see overlapping mailings and cross-marketing opportunities. For example, if we have a mailing going to Washington state roofing contractors and we are exhibiting at a convention in Tacoma, we could be sure to bring the items promoted in that mailing to display at our booth.
- Make it easy to add and edit all entries. I think they were afraid that if it was a Web-based application it would require some special, phantom skills -- at least one member of the committee still prefers a typewriter to a computer.
After looking over the requirements and glancing at my ever growing list of other tasks, I immediately thought of the ASP.NET Calendar control. I learned about the Calendar control as I think most ASP.NET developers have - by seeing the default Calendar demo. You know the one... where the random .NET expert says, "And adding a calendar control to your Web site is now as simple as inserting just three lines of code." Then he opens up Notepad, types the following lines:
He saves the file and then opens it up in a browser and, Poof!, a calendar appears. For this application I decided on using the Calendar control, but quickly realized that is was going to take a whole lot more than three lines of code. In this article, I will step through my application, and you can see how to build a similar application using the Calendar control.
Creating the Table and Adding a Record to the Database
Since the committee wanted to be able to view a calendar with a list of upcoming events, I first needed to create a Web interface for users to add new events to the database. For each event, the committee wanted to track the date, audience, type of promotion (e.g., direct mail, trade show, print advertisement, etc.), title, and staff person responsible. With these requirements, I created the following database table (named
Next, I constructed the "Add a New Event" Web page. As you can see in the source code below, the "Add a New Event" ASP.NET Web page contains a TextBox Web control for the user to enter a Title, Audience, and Person Responsible. It contains a Calendar control to allow the user to select the date of the event, and also contains a DropDownList from which the person may choose the type of event (mailing, house ad, and so on). Additionally, suitable validation controls are used to ensure that the user enters the correct information in a proper format.
In addition to the Web controls, the "Add a New Event" page contains a
Page_Load event handler
and an event handler for the submit button's server-side
Click event (named
When the values have been entered and the form submitted, the
Do_Insert is executed and the
specified event is inserted into the
A screenshot of the "Add a New Event" Web page can be seen on the right. In examining the code you may
notice that there are a few spots for improvement. Most importantly is the DropDownList that lists the
events. Currently, I have the values of the DropDownList hard-coded in (they are added programmatically
Page_Load event). Ideally, the various types should be placed in a lookup table,
and a foreign key should be used to ensure referential integrity. I plan on adding this later, but
currently have implemented this "quicker" approach due to pressing deadlines!
The "workhorse" of the "Add a New Event" Web page is the
Do_Insert event handler, which adds
the new event to the database. It starts by creating a database connection using the connection
string stored in the application's
Web.config file. For more information about
files and application level settings see Specifying Configuration Settings in
Do_Insert event handler creates a
SQLCommand object (called
SQLCommand is configured to call the stored procedure
This is accomplished by setting the command text to the stored procedure name and then setting the command's
CommandType property to
CommandType.StoredProcedure. Next, the various
stored procedure parameters are added, and the stored procedure is executed.
The contents of the
Intranet_sp_Marketing_Item_Insert stored procedure are quite simple.
The stored procedure accepts a number of input parameters and then uses them to insert a new record into
Now that we have examined how to add a new event, let's turn our attention to editing an existing event. We'll see how to accomplish exactly this in Part 2 of this article.