Click here to Skip to main content
Click here to Skip to main content

Customizing the ASP.NET Calendar Control

, 21 Jul 2011 CPOL
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.

Introduction

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" />
    </asp:Calendar>
  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" 
        onselectedindexchanged="DdyearSelectedIndexChanged">
    </asp:DropDownList>
    <asp:DropDownList ID="Ddmonth" runat="server" AutoPostBack="True" 
        onselectedindexchanged="DdmonthSelectedIndexChanged">
         <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>
    </asp:DropDownList>
  5. For year dropdown, data bind on the page load event:
  6. protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack) return;
        else
        {
            var al = new ArrayList();
            al.Add("*Year*");
            for (var i = 1900; i <=2011; i++)
            {
                al.Add(i);
            }
            Ddyear.DataSource = al;
            Ddyear.DataBind();
        }
    }
  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(
            @"(?<PrevMonth><a.*?><</a>)",
            RegexOptions.IgnoreCase
            | RegexOptions.Singleline
            | RegexOptions.CultureInvariant
            | RegexOptions.IgnorePatternWhitespace
            | RegexOptions.Compiled
            );
     
    private static Regex regNextMonth = new Regex(
            @"(?<NextMonth><a.*?>></a>)",
            RegexOptions.IgnoreCase
            | RegexOptions.Singleline
            | RegexOptions.CultureInvariant
            | RegexOptions.IgnorePatternWhitespace
            | RegexOptions.Compiled
            );
    #endregion
     
    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
        writer.Write(output);
    }
    
    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);
        c.RenderControl(localWriter);
        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
    {
        get
        {
            // null date stored or not set
            if (ViewState["SelectedDate"] == null)
            {
                return null;
            }
            return (DateTime)ViewState["SelectedDate"];
        }
        set
        {
            ViewState["SelectedDate"] = value;
            if (value != null)
            {
                calDate.SelectedDate = (DateTime)value;
                calDate.VisibleDate = (DateTime)value;
            }
            else
            {
                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") + "')");
        e.Cell.Controls.Clear();
        e.Cell.Controls.Add(hlnk);
    }
    
    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 = window.open('PopupCalendar.aspx?Ctl=' + ctl, 
                                  'PopupWindow', 'width=10,height=250,resizable=yes');
        PopupWindow.focus();
        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 = window.location.search.substr(1).substring(4);
         thisForm = window.opener.document.forms[0].elements[ctl].value = dateVae;
         self.close();
     }

License

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

Share

About the Author

Rachana BG

United States United States
No Biography provided

Comments and Discussions

 
QuestionCalender not displaying PinmemberTsukasa834-Nov-14 3:48 
QuestionMessage Automatically Removed PinmemberMember 1022658015-Apr-14 17:03 
Questionjavascript not working PinmemberVishal Pand3y9-May-13 1:04 
AnswerRe: javascript not working PinmemberRachana BG9-May-13 5:17 
QuestionIssue in month selection PinmemberAnnuKumari7-Mar-13 3:19 
GeneralMy vote of 5 PinmemberPrasyee30-Oct-12 4:34 
QuestionPostbacks Pinmembersnakewine11-Oct-12 6:17 
AnswerRe: Postbacks Pinmembersnakewine11-Oct-12 7:34 
GeneralMy vote of 5 Pinmembersnakewine10-Oct-12 12:49 
GeneralLove it man - great job! Pinmembersnakewine10-Oct-12 12:47 
Answercan i get this calendar in multilanguage?? please rply soon... PinmemberRachana BG23-Sep-12 22:11 
QuestionNot showing date in textbox using masterpage. Pinmemberpraveenfds30-Jul-12 7:41 
AnswerRe: Not showing date in textbox using masterpage. PinmemberAlRosner9-May-13 17:51 
GeneralRe: Not showing date in textbox using masterpage. PinmemberRachana BG9-May-13 21:53 
QuestionError ContontrolsExersise.calender PinmemberMinhhaipr24-Dec-11 22:39 
AnswerRe: Error ContontrolsExersise.calender PinmemberRachana BG25-Dec-11 20:06 
GeneralRe: Error ContontrolsExersise.calender PinmemberVishal Pand3y8-May-13 20:56 
QuestionError in popup PinmemberORolando22-Jul-11 1:21 
Hi namerachana,
 
I click calendar icon on calendar.aspx and popup window is opened. it seems ok but it can be shown using javascript in my opinion. When I select month or year from dropdownlist in popup window, an error raised and said "String was not recognized as a valid DateTime". It is a simple error, but I recommend test your code again. If I'm wrong, please inform me.
 
Thanks,
Onur
ORolando..

AnswerRe: Error in popup Pinmembernamerachana22-Jul-11 3:27 
AnswerRe: Error in popup Pinmemberbillgatesvijay22-Jul-11 3:40 

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

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

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