Sometimes we need to create a calendar control for displaying date into a textbox or any other control. Here is a simple demo of about creating a calendar control in asp.net.
For doing this activity we need to create a web page with the name Calendar.aspx
Following is the source code for the same.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calendar.aspx.cs" Inherits="Calendar" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Eco Friend & Co. - Time Tracker - Select Date</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="Microsoft Visual Studio, see http://msdn.microsoft.com/vstudio/" />
<meta name="Description" content="Select a date" />
<meta name="copyright" content="Copyright (c) 2011 Eco Friend & Company. All rights reserved." />
</head>
<body>
<form id="form1" runat="server">
<div id="calbg">
<div id="calcontent">
<fieldset>
<legend>SeleSelect a date: </legend>
<asp:DropDownList ID="MonthSelect" runat="server" AutoPostBack="True" OnSelectedIndexChanged="MonthSelect_SelectedIndexChanged"></asp:DropDownList>
<asp:DropDownList ID="YearSelect" runat="server" AutoPostBack="True" OnSelectedIndexChanged="YearSelect_SelectedIndexChanged">
</asp:DropDownList>
<asp:Calendar ID="Cal" runat="server" ShowTitle="False" ShowNextPrevMonth="False"
DayNameFormat="FirstTwoLetters" FirstDayOfWeek="Sunday"
OnSelectionChanged="Cal_SelectionChanged">
<TodayDayStyle Font-Bold="True" ForeColor="White"
BackColor="#990000"></TodayDayStyle>
<DayStyle BorderWidth="2px" ForeColor="#666666" BorderStyle="Solid"
BorderColor="White"
BackColor="#EAEAEA"></DayStyle>
<DayHeaderStyle ForeColor="#649CBA"></DayHeaderStyle>
<SelectedDayStyle Font-Bold="True" ForeColor="#333333"
BackColor="#FAAD50"></SelectedDayStyle>
<WeekendDayStyle ForeColor="White"
BackColor="#BBBBBB"></WeekendDayStyle>
<OtherMonthDayStyle ForeColor="#666666"
BackColor="White"></OtherMonthDayStyle>
</asp:Calendar>
<br />
<table>
<tr>
<td valign="middle" colspan="2">
Date Selected:
<asp:Label ID="lblDate" runat="server">
</asp:Label>
<input id="datechosen" type="hidden" name="datechosen" runat="server">
</td>
</tr>
<tr>
<td valign="middle">
<asp:Button ID="OKButton" runat="server" Text="OK" />
</td>
<td valign="middle">
<asp:Button ID="CancelButton" runat="server" Text="Cancel" OnClientClick="javascript:self.close()"/>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
</form>
</body>
</html>
Following is the source code of the Calendar.aspx.cs file
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class Calendar : System.Web.UI.Page
{
public string controlToEdit;
public string isPostBack;
public Calendar()
{
LoadComplete += new EventHandler(Page_LoadComplete);
}
void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
controlToEdit = Request.QueryString["controlID"];
Session.Add("controlToEdit", controlToEdit);
isPostBack = Request.QueryString["isPostBack"];
Session.Add("isPostBack", isPostBack);
// Cast first day of the week from web.config file. Set it to the calendar
//Cal.FirstDayOfWeek = (System.Web.UI.WebControls.FirstDayOfWeek)Convert.ToInt32(ConfigurationManager.AppSettings["FirstDayOfWeek"]);
// Select the Correct date for Calendar from query string
// If fails, pick the current date on Calendar
try
{
Cal.SelectedDate = Cal.VisibleDate = Convert.ToDateTime(lblDate.Text);
}
catch
{
Cal.SelectedDate = Cal.VisibleDate = DateTime.Today;
}
// Fills in correct values for the dropdown menus
FillCalendarChoices();
SelectCorrectValues();
}
else
{
if (Session["controlToEdit"] != null)
controlToEdit = (string)Session["controlToEdit"];
if (Session["isPostBack"] != null)
isPostBack = (string)Session["isPostBack"];
}
}
void Page_LoadComplete(object sender, System.EventArgs e)
{
OKButton.OnClientClick = "javascript:window.opener.SetControlValue('" + this.controlToEdit + "','" + lblDate.Text + "','" + this.isPostBack + "');";
}
protected void FillCalendarChoices()
{
DateTime thisdate = (DateTime.Now).AddYears(5);
// Fills in month values
for (int x = 0; x < 12; x++)
{
// Loops through 12 months of the year and fills in each month value
ListItem li = new ListItem(thisdate.ToString("MMMM"), thisdate.Month.ToString());
MonthSelect.Items.Add(li);
//to add next next month name to the monthselect drop downlist control like aug then sept and so on....
thisdate = thisdate.AddMonths(1);
}
// Fills in year values and change y value to other years if necessary
for (int y = 2000; y <= thisdate.Year; y++)
{
YearSelect.Items.Add(y.ToString());
}
}
protected void SelectCorrectValues()
{
lblDate.Text = Cal.SelectedDate.ToShortDateString();
datechosen.Value = lblDate.Text;
MonthSelect.SelectedIndex = MonthSelect.Items.IndexOf(MonthSelect.Items.FindByValue(Cal.SelectedDate.Month.ToString()));
YearSelect.SelectedIndex = YearSelect.Items.IndexOf(YearSelect.Items.FindByValue(Cal.SelectedDate.Year.ToString()));
}
protected void Cal_SelectionChanged(object sender, System.EventArgs e)
{
Cal.VisibleDate = Cal.SelectedDate;
SelectCorrectValues();
}
protected void MonthSelect_SelectedIndexChanged(object sender, System.EventArgs e)
{
Cal.SelectedDate = Cal.VisibleDate
= new DateTime(Convert.ToInt32(YearSelect.SelectedItem.Value),
Convert.ToInt32(MonthSelect.SelectedItem.Value), 1); ;
SelectCorrectValues();
}
protected void YearSelect_SelectedIndexChanged(object sender, System.EventArgs e)
{
Cal.SelectedDate = Cal.VisibleDate
= new DateTime(Convert.ToInt32(YearSelect.SelectedItem.Value),
Convert.ToInt32(MonthSelect.SelectedItem.Value), 1); ;
SelectCorrectValues();
}
}
Till now we have created an aspx page and it depends how to open this webpage. I prefer to open this web page as a popup therefore we will be creating a javascript file with some methods in it.
Following is the source code for the same, save this file with script.js extension
var popUp;
function SetControlValue(controlID, newDate, isPostBack)
{
popUp.close();
//document.forms[0]["textBox"].value=0;
//document.getElementById('<%= textBox.ClientID%>').value=0;
document.forms[0][controlID].value=newDate;
// __doPostBack(controlID,'');
}
function OpenPopupPage (pageUrl, controlID, isPostBack)
{
popUp=window.open(pageUrl+'?controlID='+controlID+'&isPostBack='+ isPostBack,'popupcal', 'width=250,height=330,left=200,top=250');
}
Now in order to test the functionality we'll be creating a default.aspx page with one textbox control in it. Following is the source code for the same.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="javascript/script.js">
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
<a href="javascript:OpenPopupPage('Calendar.aspx','<%= txtDate.ClientID %>','<%= Page.IsPostBack %>');">
<img src="images/icon-calendar.gif" /></a>
</div>
</form>
</body>
</html>
Now just run the web application and click on the calendar icon you will see the following output.
![How to create a Calendar Control in ASP.NET]()
![Calendar Control in ASP.NET]()
![Calendar Control in ASP.NET]()
Now press the ok button. you'll see that the date is displayed in the textbox.
Hope you liked the example.