Birthdays, anniversaries, bill payments,
and (probably the most nerve-racking of them all!) project deadlines. All
these have one thing in common: a date. And if you’re like me, you probably
can’t remember them all without the aid of a calendar or diary.

Well, it’s time to take your diary digital, with ASP.NET’s
Calendar control. One of the more interesting controls in the .NET Framework,
the Calendar control allows programmers to build applications to display and
manipulate dates, months, and years. In this article, I’ll show you how.

The basic calendar

Let’s start with a simple example: the source code for a no-frills
calendar on a Web page, in Listing A. And here’s what it would look like
in action:

Figure A

Basic ASP.NET calendar control

Pretty cool, huh? And all automatic, to boot—no more
worrying about whether August has 30 or 31 days, because Calendar handles all
those calculations internally for you.

The Calendar control can display any date between 0 and 9999
AD. It’s enclosed within a <form> element, and
its runat=server attribute ensures
that it is processed on the server. Each date displayed in the calendar is a
hyperlink; however, if you try clicking on one of these links, nothing will
happen, because the script above doesn’t (yet) include any code to trap and
process clicks (more on this shortly).

By default, the Calendar control displays a calendar for the
current month. However, you can display a calendar for any month, simply by
setting the Calendar control’s TodaysDate
and SelectedDate properties to a
custom DateTime value.

A fancier calendar

The backcolor
property in the script above is just one of many that control the appearance of
the calendar. The code in Listing B shows a few more. The calendar
that appears now is a definite improvement over the earlier one:

Figure B

ASP.NET calendar control with more display options set

The most important difference between this calendar and the
previous one lies in the use of the nextprevformat
attribute within the <asp:calendar> element,
which controls how the links to the next and previous months are displayed in
the title bar of the calendar. By default, you only see ASCII arrows to
indicate the direction of movement. But set the value of the nextprevformat attribute to ShortMonth
and the arrows will be replaced by abbreviated month names—for example, Jan or
Feb. Change this value to FullMonth and the short month names are
replaced by their longer equivalents—for example, January or February.

Next, the daynameformat
attribute allows you to define the manner in which the days of the week will be
displayed. Setting this to FirstTwoLetters displays the first two letters of
each day name respectively; other possible values include FirstLetter, Short,
and Full.

There are many other style elements you can embed within the
opening and closing tags of the <asp:calendar>
element. Here are the ones used in Listing B:

  • titlestyle controls
    the formatting for the title row of the calendar (the row that displays
    the name of the current month).
  • dayheaderstyle
    controls the display of the names of the days in the row following the
    title row.
  • todaydaystyle
    controls how the current date (“today”) is highlighted.
  • nextprevstyle
    contains the CSS style rules that control the display of the text for the
    next and previous months in the title bar of the calendar.
  • othermonthdaystyle
    controls the display of dates that do not belong to the current month.

Scripting calendar display attributes

So now you know how to manipulate the appearance of the
calendar through its formatting attributes. But the .NET Framework also allows
you to alter those properties at run time, and thus exert a very fine degree of
control over how each day is displayed in the calendar. Take a look at the
script in Listing C.

As each day in the calendar is displayed, a special DayRender
event is generated by the Calendar control. This event can be trapped and
handled by a custom function. In Listing C, this function is called MyCalendar_DayRender(), and it applies a custom style if the day being
rendered is “today”.

Two new objects are used by this custom renderer: CellTable() (which refers to the table cell around each day)
and Day() (which represents each day). We use the IsToday property of the Day() object to
determine if we’re rendering today’s date, and if so we apply a custom style to
it with the ApplyStyle() method of
the CellTable() object.

Handling calendar clicks

The Calendar control supports a number of different
events—you already saw the DayRender event in the previous example—but the most
commonly used one by far is the SelectionChanged event. This event is generated
every time the user clicks a particular date on the calendar.

In all the examples you’ve seen so far, each date in the
calendar was displayed as a hyperlink. However, nothing happened when you
clicked it. It’s time for that to change, by incorporating the SelectionChanged
event into the code, as shown in Listing D. Here’s
what it looks like:

Figure C

Using the SelectionChanged event in the ASP.NET calendar control

Nothing fancy here: just a regular form asking for details
of a journey, similar to something you might see on a travel or ticket-booking
site. To see how the SelectionChanged event comes in useful here, select a date
from the calendar by clicking on its corresponding hyperlink, and you will see
that the script reloads and inserts the date you had selected into the form
input field.

Most of this happens through the OnSelectionChanged attribute, which points to a custom event
handler called MyCalendar_SelectionChanged(). This
handler assigns the selected date to the Text
property of the txtJourneyDate input control.

Calendar power at your finger tips

Compared to other scripting languages—in which you have to manually
create a calendar, perform date calculations, and assign events—ASP.NET’s
Calendar control comes as a welcome breath of fresh air. If you have a site
that requires date input from users, the Calendar control provides an easy way
to create a graphical date selection tool, thus improving the user experience
and reducing erroneous input.