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.
Now press the ok button. you'll see that the date is displayed in the textbox.
Hope you liked the example.