The Calendar control becomes an essential control for business application developments since the most of data entry forms used to have one or more field for Date value. Let’s say! we are working on a page called “Candidate Resume Entry” of Recruitment System. There will be some date fields such as “Date of Birth of Candidate”, “Resume Submitted Date” in that page. The calendar control needed to be used in that page. Okay. Let me stop talking about this here as I know you already know how calendar control is important for your project.

There are three sections in this article and each section has two parts called “Running the demo project” and “Lab“. First, you can see how it looks like by running the demo application. Then, if you wanna use this control in your project, you can read the details in “Lab”.

The following topics will be covered in this article.

* Using ASP.NET Calendar Control in ASP.NET Project
* Showing ASP.NET Calendar Control in Popup Window
* Using Yahoo.UI.Calendar Control in ASP.NET Project

Note:

1. I’d highly recommend you to download the demo project before start reading this article.
2. Even thought there are three different sections in my article, you can feel free to skip any section and move on to the next section that you wanna read.

Thanks. Hopefully, you may find it useful.
Using ASP.NET Calendar Control in ASP.NET Project

This section is created only for beginners who haven’t used ASP.NET Calendar in Web Project. Feel free to skip this section if you already know about it.
Running the sample

1. Download and extract the zip file.
2. Set SimpleCalendar.aspx as start page.
3. Run the web application.
You will see the result as below if you click “…” button nearly Date Of Birth TextBox.

4. If you choose a date from Calendar Control then the selected date will be shown in TextBox and this calendar will be disappeared.

Do you wanna try this code in your owned project?
Lab: Using ASP.NET Control in ASP.NET Project

1. Create one ASP.NET Web Project (C#)
2. Place TextBox and Button in WebForm

<asp :TextBox ID="txtDOB" Runat="server">
</asp>
<asp :Button ID="btnDOB" Runat="server" Text="...">
</asp>

3. Add Calendar control to WebForm.

<asp :calendar id="cdrCalendar" runat="server"
backcolor="#ffffff" width="250px" height="200px"
font-size="12px" font-names="Arial" borderwidth="2px"
bordercolor="#000000" nextprevformat="shortmonth"
daynameformat="firsttwoletters"
<strong>Visible="False">
<todaydaystyle ForeColor="White"
BackColor="Black"></todaydaystyle>
<nextprevstyle Font-Size="12px" Font-Bold="True"
ForeColor="#333333">  </nextprevstyle>
<dayheaderstyle Font-Size="12px"
Font-Bold="True">
</dayheaderstyle>
<titlestyle Font-Size="14px" Font-Bold="True"
BorderWidth="2px" ForeColor="#000055">
</titlestyle>
<othermonthdaystyle ForeColor="#CCCCCC">
</othermonthdaystyle>

4. Add the following codes in Button Click Event

try{
if(txtDOB.Text.Trim() != "")
cdrCalendar.SelectedDate =
Convert.ToDateTime(txtDOB.Text);
}
catch
{}
//showing the calendar.
cdrCalendar.Visible= true;

5. Add the following codes in SelectionChanged Event of Calendar

//displaying the selected date in TextBox
txtDOB.Text = cdrCalendar.SelectedDate.ToString();
//hiding the calendar.
cdrCalendar.Visible= false;

Finally, run your web application. You will see the same result as the demo.

Demo: http://www.codeproject.com/KB/aspnet/aspnet-yahoouicalendar/Yahoo_UI_Calender_in_ASPNET.PNG
Download: http://www.codeproject.com/KB/aspnet/aspnet-yahoouicalendar/WebCalendarTest.zip
Source: http://michaelsync.net/2006/11/06/aspnet-calendar-control-and-yahoouicalendar

Related Listings:

1. Week Calendar using Jquery A jquery plugin providing a weekly view of calendar events....
2. VLA Calendar version 2.0 The Vista-like Ajax Calendar (vlaCalendar) version 2 is a unobtrusive...
3. Mootools Ajax Calendar (Vista-Like) Vista-like Ajax calendar is an unobtrusive, slick calendar script which...

Do you like this post?

Email: