Click here to Skip to main content
13,297,411 members (59,279 online)
Click here to Skip to main content
Add your own
alternative version


32 bookmarked
Posted 21 Jul 2011

Customizing the ASP.NET Calendar Control

, 21 Jul 2011
Rate this:
Please Sign up or sign in to vote.
Adding dropdownlists for month and year to the ASP.NET Calendar control for easier navigation.


Recently for a project, I had to use the ASP.NET Calendar control to allow the user to enter their date of birth. I found that the calendar control is good for selecting a date from current, next, or previous month, and when entering a date of birth, it would need so many navigations to get to the right date. This was not feasible.

Below we will see how to make the Calendar control more flexible in terms of its navigation through the addition of two drop-down lists. First, create a User Control so that the customized Calendar control can be used on an .aspx page.

I have attached a simple project which guides you on how to use the customized Calendar control to enter a date of birth.

Customizing the Calendar Control

  1. First the add an ASP.NET Calendar control with some styles applied.
  2. <asp:Calendar ID="calDate" runat="server"
        BackColor="White" BorderColor="#3366CC"  CellPadding="1" DayNameFormat="Shortest"
        Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399" Height="200px" 
        Width="250px" ondayrender="calDate_DayRender">
        <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
        <TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
        <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
        <WeekendDayStyle BackColor="#CCCCFF" />
        <OtherMonthDayStyle ForeColor="#999999" />
        <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
        <DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
        <TitleStyle BackColor="#003399" BorderColor="#3366CC" 
            BorderWidth="1px" Font-Bold="True"
            Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
  3. Add dropdown lists for month and year lists.
  4. For month dropdown, hardcode the data in the Design page only; for year dropdown, bind the data in the code-behind.

    <asp:DropDownList ID="Ddyear" runat="server" AutoPostBack="True" 
    <asp:DropDownList ID="Ddmonth" runat="server" AutoPostBack="True" 
         <asp:ListItem Value="00">*Month*</asp:ListItem>
        <asp:ListItem Value="01">Jan</asp:ListItem>
        <asp:ListItem Value="02">Feb</asp:ListItem>
        <asp:ListItem Value="03">March</asp:ListItem>
        <asp:ListItem Value="04">april</asp:ListItem>
        <asp:ListItem Value="05">May</asp:ListItem>
        <asp:ListItem Value="06">June</asp:ListItem>
        <asp:ListItem Value="07">July</asp:ListItem>
        <asp:ListItem Value="08">August</asp:ListItem>
        <asp:ListItem Value="09">Sept</asp:ListItem>
        <asp:ListItem Value="10">Oct</asp:ListItem>
        <asp:ListItem Value="11">Nov</asp:ListItem>
        <asp:ListItem Value="12">Dec</asp:ListItem>
  5. For year dropdown, data bind on the page load event:
  6. protected void Page_Load(object sender, EventArgs e)
        if (IsPostBack) return;
            var al = new ArrayList();
            for (var i = 1900; i <=2011; i++)
            Ddyear.DataSource = al;
  7. These dropdown lists will be added to the calendar header by overriding the Render method. Previous month navigation icon (i.e., ‘<’ on the left side of the calendar header) is replaced by the month dropdownlist. Next, the month navigation icon (i.e., ‘>’ on the right side of the calendar header) is replaced by the year dropdownlist. In the middle of the calendar header, the selected month name and year will be displayed (e.g.: March 1989).
  8. #region Regular expressions
    private static Regex regPrevMonth = new Regex(
            | RegexOptions.Singleline
            | RegexOptions.CultureInvariant
            | RegexOptions.IgnorePatternWhitespace
            | RegexOptions.Compiled
    private static Regex regNextMonth = new Regex(
            | RegexOptions.Singleline
            | RegexOptions.CultureInvariant
            | RegexOptions.IgnorePatternWhitespace
            | RegexOptions.Compiled
    protected override void Render(HtmlTextWriter writer)
        // turn user control to html code
        string output = CalControl1.RenderToString(calDate);
        MatchEvaluator mevm = new MatchEvaluator(AppendMonth);
        output = regPrevMonth.Replace(output, mevm);
        MatchEvaluator mevb = new MatchEvaluator(AppendYear);
        output = regNextMonth.Replace(output, mevb);
        // output the modified code
    public static string RenderToString(Control c)
        bool previousVisibility = c.Visible;
        c.Visible = true; // make visible if not
        // get html code for control
        System.IO.StringWriter sw = new System.IO.StringWriter();
        HtmlTextWriter localWriter = new HtmlTextWriter(sw);
        string output = sw.ToString();
        // restore visibility
        c.Visible = previousVisibility;
        return output;
    private string AppendMonth(Match m)
        return CalControl1.RenderToString(Ddmonth) + " " ;
    private string AppendYear(Match m)
        return  " " + CalControl1.RenderToString(Ddyear);
  9. Initially, the calendar shows the current date, and then it displays whichever date you select.
  10. The code to set the current date to show initially is as below:

    public DateTime? SelectedDate
            // null date stored or not set
            if (ViewState["SelectedDate"] == null)
                return null;
            return (DateTime)ViewState["SelectedDate"];
            ViewState["SelectedDate"] = value;
            if (value != null)
                calDate.SelectedDate = (DateTime)value;
                calDate.VisibleDate = (DateTime)value;
                calDate.SelectedDate = new DateTime(0);
                calDate.VisibleDate = DateTime.Now.Date;
  11. Finally, the event handler code for DayRender, DdmonthSelectedIndexChanged, and DdyearSelectedIndexChanged are as follows:
  12. protected void calDate_DayRender(object sender, DayRenderEventArgs e)
        HyperLink hlnk = new HyperLink();
        hlnk.Text = ((LiteralControl)e.Cell.Controls[0]).Text;
        hlnk.Attributes.Add("href", "javascript:SetDate('" +
        e.Day.Date.ToString("dd/MM/yyyy") + "')");
    protected void DdyearSelectedIndexChanged(object sender, EventArgs e)
       var syear = DateTime.Now.Year;
       var smonth = DateTime.Now.Month;
       if (Ddmonth.SelectedValue != "00")
           smonth = Convert.ToInt32(Ddmonth.SelectedValue);
       if (Ddyear.SelectedValue!="*Year*")
           syear = Convert.ToInt32(Ddyear.SelectedValue);
       var date = smonth + "/" + DateTime.Now.Day + "/" +syear;
       var dateTime = Convert.ToDateTime(date);
       calDate.VisibleDate = dateTime;
    protected void DdmonthSelectedIndexChanged(object sender, EventArgs e)
        var smonth = DateTime.Now.Month;
        var year = DateTime.Now.Year;
        if (Ddyear.SelectedValue != "*Year*")
            year = Convert.ToInt32(Ddyear.SelectedValue);
        if (Ddmonth.SelectedValue != "00")
            smonth = Convert.ToInt32(Ddmonth.SelectedValue);
        var sdate = smonth + "/" + DateTime.Now.Day + "/" + year;
        calDate.VisibleDate = Convert.ToDateTime(sdate);

The above code completes customizing the Calendar control. Now we will look at a simple example to see how to use this control to enter date of birth data. (The complete source code is available for download at the top of this article.)

  1. In the first page (calendar.aspx), create a textbox for date of birth data and an image button or anchor tag to open a calendar on popup onclick. Pass the textbox ID to the popup to assign the selected date to the textbox.
  2. <asp:textbox id="tbMyDate" runat="server" Width="80px"></asp:textbox>
    <a href="" onclick="return PopupPicker('tbMyDate')">
    <img src="Images/Calendar_scheduleHS.png" alt="Picture" border="0"></a>

    Here is the JavaScript to open a popup:

    function PopupPicker(ctl) {
        var PopupWindow = null;
        PopupWindow ='PopupCalendar.aspx?Ctl=' + ctl, 
                                  'PopupWindow', 'width=10,height=250,resizable=yes');
        return false;
  3. In the PopupCalendar.aspx page, we need to register the user control which customized the calendar. And we need to handle the SetDate() JavaScript function  which calls the selecting date function from the calendar. It assigns the selected date to the DOB textbox and closes the popup. See the calDate_DayRender method definition.
  4. <%@ Register src="CalControl1.ascx" tagname="CalControl1" tagprefix="uc2" %>
    <uc2:CalControl1 ID="CalControl11" runat="server" />
     function SetDate(dateValue) {
         ctl =;
         thisForm = window.opener.document.forms[0].elements[ctl].value = dateVae;


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Rachana BG
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionNot showing date in textbox using masterpage. Pin
praveenfds30-Jul-12 7:41
memberpraveenfds30-Jul-12 7:41 
AnswerRe: Not showing date in textbox using masterpage. Pin
AlRosner9-May-13 17:51
memberAlRosner9-May-13 17:51 
GeneralRe: Not showing date in textbox using masterpage. Pin
Rachana BG9-May-13 21:53
memberRachana BG9-May-13 21:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.171207.1 | Last Updated 21 Jul 2011
Article Copyright 2011 by Rachana BG
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid