How To Create A Calendar In Asp Net Using C#

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 >