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.

Listing A

<%@ Page Language="C#" %>
<html>
<head></head>
<body>
<form runat="server">
<asp:calendar id="MyCalendar" runat="server" backcolor="white"
width="250px" height="200px" font-size="12px" font-names="Arial" />
</form>
</body>
</html>

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

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.

Listing B

<%@ Page Language="C#" %>
<html>
<head></head>
<body>
<form runat="server">
<asp:calendar id="MyCalendar" runat="server" backcolor="#ffffff"
width="250px" height="200px" font-size="12px" font-names="Arial"
borderwidth="2px" bordercolor="#000000" nextprevformat="shortmonth"
daynameformat="firsttwoletters">
<titlestyle font-size="14px" font-bold="true" borderwidth="2px"
forecolor="#000055"/>
<dayheaderstyle font-size="12px" font-bold="true" />
<todaydaystyle backcolor="#000000" forecolor="#ffffff" />
<nextprevstyle font-size="12px" font-bold="true" forecolor="#333333"/>
<othermonthdaystyle forecolor="#cccccc" />
</asp:calendar>
</form>
</body> </html>

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 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 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.

12 Next >

Do you need help with HTML? Gain advice from Builder AU forums

Related links

Comments

1

murthy - 23/02/07

well using for s/w professional

» Report offensive content

2

murthy - 23/02/07

well using for s/w professional

» Report offensive content

3

sri - 17/07/07

this is really kool thanks i got the code for which i m searching for thanks so much

» Report offensive content

4

umapathy PS - 04/09/07

Hi,
i want to hide entire column of the calendar dates belongs to particular days like monday,tueday,wednesday,thursday,saturday.
OR
i want to display only column of the calendar dates belongs to sunday and friday

» Report offensive content

5

umapathy PS - 04/09/07

Hi,
i want to hide entire column of the calendar dates belongs to particular days like monday,tueday,wednesday,thursday,saturday.
OR
i want to display only column of the calendar dates belongs to sunday and friday

» Report offensive content

6

umapathy PS - 04/09/07

Hi,
i want to hide entire column of the calendar dates belongs to particular days like monday,tueday,wednesday,thursday,saturday.
OR
i want to display only column of the calendar dates belongs to sunday and friday

» Report offensive content

7

Srinivas.B - 01/01/08

hi,
i want to add some new events in my calender.how can i write code for that in website.

» Report offensive content

8

Kolags - 03/03/08

Hi, I want to set Limit for calendar. Like date range between 1Yr From date to To date.

» Report offensive content

9

Amy - 07/10/08

Hi,

I want to build the same calendar control for my windows mobile application (I dont want to use this web control). Can anybody suggest me some link?

thanks.

» Report offensive content

10

shyam - 19/08/09

Hi,
i want to connect a calender from other website,which display our copmanys info ti is like broker/agent from i need to connect a event calender to my webpage.

please any body help in coding..

» Report offensive content

Leave a comment

You must read and type the 6 chars within 0..9 and A..F

* indicates mandatory fields.

Latest comments

10

shyam - 19/08/09

Hi, i want to connect a calender from other website,which display our copmanys info ti is like broker/agent from i need ... more

9

Amy - 10/07/08

Hi, I want to build the same calendar control for my windows mobile application (I dont want to use this web control). ... more

8

Kolags - 03/03/08

Hi, I want to set Limit for calendar. Like date range between 1Yr From date to To date. ... more

Log in


Sign up | Forgot your password?

Blogs

RSS feed

What's on?

  • Optus Deal

    Broadband + home phone + PlayStation®3 in a single package price!