Using a calendar control to let the end user select a date in the standard normal way in ASP.NET would cause a post back.  Is there a way of using the control with minimum roundtrips between the server and the client browser?  In this article I will be using a calendar control that was created by Mehmet Genc.   In this article I will provide a way of getting the calendar control result in another standard control, such as a TextBox.

Let us jumpstart into Visual Studio .NET 2003 directly and create a new ASP.NET project which is going to be called ECalendar.

1.      Open Visual Studio .NET 2003 and create a new project of the type ASP.NET.

2.      Drag a label and put it on the web form and then give it a text property a value of My Date.

3.      Afterwards, drag a text from toolbox into it and name it TxtMyDate.

4.      Switch to the HTML view of webform1 and locate the end of the Textbox tag.

5.      Insert the following HTML section after it.

Listing 1

<A href="javascript:openCalendar('TxtMyDate');"><IMG id="IMG6" src="CALENDAR.BMP" runat="server"></A>

6.      Note that the image src tag is referring to a picture.  From the source code (that you can download at the end of this article) you can get the picture or you may choose to select a different picture for the project.

7.      Since we are a calling a JavaScript window with a function called OpenCalendar, we need to give the HTML code that is also in webform1 HTML part inside the header tag.

Listing 2

<script language="javascript" type="text/javascript">
function openCalendar(txt)
{   
window.open('mycal.aspx?textbox=' + txt,'cal','width=250,height=220,left=570,top=180');
}
</script>

8.      By now your WebForm is complete, so let us turn to the calendar page.

9.      You may either use the MyCal.aspx form provided with the solution (copy all the files entitled MyCal.* into the solution directory and include them in the project) or choose to implement the whole form from scratch.  In both cases it is strongly recommended to go and read the whole article published by Mehmet Genc.

10.  Your webform1 should look something like figure 1.

Figure 1

I feel now that I owe you some explanation of what is happening.  Clearly, you can see that in step 5 an anchor tag was created with a button click event that will call the JavaScript.  The important part is the passed parameter to that function (the standard control name).  That is how the function would know where to put the result when it finishes.  Now back to the function that is provided in step 7.  The function opens a popup window that displays the calendar WebForm called MyCal.aspx and allows the user to select his date.

[Download Sample]

There are several advantages that can be attributed to the use of this method, including the following.

·         It has the ability to fill almost any standard control. (For example a label, textbox, etc…)

·         No Post back is being done on your original form.

·         Only the calendar popup window is being post back (i.e. a very small amount of information is transferred back and forth in a fast manner).

·         You can link the same calendar control to a web page with increasing the page size in an uncontrolled manner.

·         This calendar control is elaborate enough to allow the user to navigate easily through months and years.

·         Last but not least, it is free!