Using the ASP.NET Calendar control

Learn to use ASP.NET's Calendar control to easily build applications to display and manipulate dates, months, and years. We'll show you how.

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.

Editor's Picks

Free Newsletters, In your Inbox