Pop-up Calendar

This code is intended to be used in an ASP.NET page.
The solution is pretty old. I have this code since C# early days so, if somebody has a better or cleaner solution, don't excitate in contact me.

Following is the code of the calendar itself and then how to call it from any ASP.NET page.

Calendar Page

This code must be put in a page named calendar.aspx. This is the code responsible to show a calendar to the user.

<%@ Page language="c#" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Web.UI.WebControls" %>
<%@ Import Namespace="System.Configuration" %>
 
<script runat="server">
    //*****************************************************************************
    //
    // The calendar page allows the user to select a date.  It's used as a popup
    // window on several pages in the Time Tracker application.
    //
    // The calendar page is used to display a popup calendar to users from
    // several different pages in the Time Tracker application.  It's primary
    // job is to allow the user to select a date.
    //
    //**************************************************************************
 
    private void Page_Load(object sender, System.EventArgs e)
    {   
        if (!Page.IsPostBack)
        {
            string selected = Request.QueryString["selected"];
            string id = Request.QueryString["id"];
            string form = Request.QueryString["formname"];
            string postBack = Request.QueryString["postBack"];
 
            // Cast first day of the week from web.config file.  Set it to the calendar
            Cal.FirstDayOfWeek = (System.Web.UI.WebControls.FirstDayOfWeek)Convert.ToInt32(0);         
 
            // Select the Correct date for Calendar from query string
            // If fails, pick the current date on Calendar
            try
            {
                Cal.SelectedDate = Cal.VisibleDate = Convert.ToDateTime(selected);
            }
            catch
            {
                Cal.SelectedDate = Cal.VisibleDate = DateTime.Today;
            }
 
            // Fills in correct values for the dropdown menus
            FillCalendarChoices();
            SelectCorrectValues();
 
            // Add JScript to the OK button so that when the user clicks on it, the selected date
            // is passed back to the calling page.
            OKButton.Attributes.Add("onClick", "window.opener.SetDate('" + form + "','" + id + "', document.Calendar.datechosen.value," + postBack + ");");
            CancelButton.Attributes.Add("onClick", "CloseWindow()");
        }
    }
 
    //***************************************************************
    //
    // FillCalendarChoices method is used to fill dropdowns with month and year values 
    // 
    //***************************************************************
 
    private void FillCalendarChoices()
    {
        DateTime thisdate = new DateTime(DateTime.Today.Year,1,1);
 
        // 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);
            thisdate = thisdate.AddMonths(1);
        }
 
        // Fills in year values and change y value to other years if necessary
        for (int y=1994; y <= thisdate.Year; y++)
        {
            YearSelect.Items.Add(y.ToString());
        }
    }
 
    //***************************************************************************
    //
    // The SelectCorrectValues method is used to select the correct values in dropdowns 
    // according to the selected date on Calendar
    //
    //***************************************************************************
 
    private 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()));
    }
 
    //**************************************************************************
    //
    // Cal_SelectionChanged event handler highlights the selected date on the Calendar and
    // calls SelectCorrectValues() to synchronize to correct values on dropdowns.
    //
    //**************************************************************************
 
    private void Cal_SelectionChanged(object sender, System.EventArgs e)
    {
        Cal.VisibleDate = Cal.SelectedDate;
        SelectCorrectValues();
    }
 
    //**************************************************************************
    //
    // MonthSelect_SelectedIndexChanged event handler selects the first day of the month when
    // a month selection has being changed.
    //
    //**************************************************************************
 
    private 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();
    }
 
    //**************************************************************************
    //
    // YearSelect_SelectedIndexChanged event handler selects a year value on the Calendar control
    // when a year selection has being changed.
    //
    //**************************************************************************
 
    private 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();
    }
</script>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
    <head>
        <title>Calendar</title>
        <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
        <link href="styles.css" type="text/css" rel="stylesheet">
        <script language="javascript">
            function CloseWindow()
            {
                self.close();
            }
        </script>
    </head>
    <body bgColor="#ffffff" leftMargin="5" topMargin="5">
        <form id="Calendar" method="post" runat="server">
            <table cellSpacing="0" cellPadding="0" width="100%" border="0">
                <tr bgColor="white">
                    <td colspan="2"><img src="images/spacer.gif" height="10" width="1"></td>
                </tr>
                <tr bgColor="white">
                    <td align="middle" colSpan="2">
                        <asp:dropdownlist id="MonthSelect" runat="server" CssClass="standard-text" Height="22px" Width="90px" AutoPostBack="True" OnSelectedIndexChanged="MonthSelect_SelectedIndexChanged"></asp:dropdownlist>&nbsp;
                        <asp:dropdownlist id="YearSelect" runat="server" CssClass="standard-text" Height="22px" Width="60px" AutoPostBack="True" OnSelectedIndexChanged="YearSelect_SelectedIndexChanged"></asp:dropdownlist>
                        <asp:calendar id="Cal" runat="server" BorderWidth="5px" ShowTitle="False" ShowNextPrevMonth="False" BorderStyle="Solid" Font-Size="XX-Small" Font-Names="Arial" BorderColor="White" DayNameFormat="FirstTwoLetters" ForeColor="#C0C0FF" FirstDayOfWeek="Monday" CssClass="standard-text" 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>
                    </td>
                </tr>
                <tr>
                    <td align="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 colspan="2"><img src="images/spacer.gif" height="10" width="1"></td>
                </tr>
                <tr>
                    <td align="middle">
                        <asp:button id="OKButton" runat="server" Text="OK" Width="60px"></asp:button>
                    </td>
                    <td align="middle">
                        <a href="javascript:CloseWindow()">
                            <asp:button id="CancelButton" runat="server" Text="Cancel" Width="60px"></asp:button>
                        </a>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

Calling the Calendar

The following code must be added to every page in which the calendar will be called.

<script language="javascript">
var popUp; 

function OpenCalendar(idname, postBack)
{
    popUp = window.open('Calendar.aspx?formname=' + document.forms[0].name + 
        '&id=' + idname + '&selected=' + document.forms[0].elements[idname].value + '&postBack=' + postBack, 
        'popupcal', 
        'width=165,height=208,left=200,top=250');
}

function SetDate(formName, id, newDate, postBack)
{
    eval('var theform = document.' + formName + ';');
    popUp.close();
    theform.elements[id].value = newDate;
    if (postBack)
        __doPostBack(id,'');
}    
</script>

<asp:TextBox id="dtEndDate" ReadOnly="True" runat="server" class="textbox"></asp:TextBox>        
<a href="javascript:OpenCalendar('dtEndDate', false)"><img src="icon-calendar.gif" border="0" align="absBottom">
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License