Click here to Skip to main content
15,867,568 members
Articles / Web Development / ASP.NET
Article

Customizing the ASP.NET Calendar Control

Rate me:
Please Sign up or sign in to vote.
4.60/5 (15 votes)
21 Jul 2011CPOL2 min read 264.2K   11.2K   32   22
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.NET
    <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.

    XML
    <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. C#
    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. C#
    #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:

    C#
    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. C#
    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.NET
    <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:

    JavaScript
    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. ASP.NET
    <%@ 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();
     }

Image 1

License

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


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionWorking perfectly - Thank you Pin
rush101010-Oct-19 4:17
rush101010-Oct-19 4:17 
QuestionVB version? Pin
Member 124936525-May-16 8:18
Member 124936525-May-16 8:18 
QuestionCalender not displaying Pin
Tsukasa834-Nov-14 2:48
Tsukasa834-Nov-14 2:48 
Questionjavascript not working Pin
Vishal Pand3y9-May-13 0:04
Vishal Pand3y9-May-13 0:04 
AnswerRe: javascript not working Pin
Rachana BG9-May-13 4:17
Rachana BG9-May-13 4:17 
QuestionIssue in month selection Pin
AnnuKumari7-Mar-13 2:19
AnnuKumari7-Mar-13 2:19 
GeneralMy vote of 5 Pin
Prasyee30-Oct-12 3:34
Prasyee30-Oct-12 3:34 
QuestionPostbacks Pin
snakewine11-Oct-12 5:17
snakewine11-Oct-12 5:17 
AnswerRe: Postbacks Pin
snakewine11-Oct-12 6:34
snakewine11-Oct-12 6:34 
GeneralMy vote of 5 Pin
snakewine10-Oct-12 11:49
snakewine10-Oct-12 11:49 
GeneralLove it man - great job! Pin
snakewine10-Oct-12 11:47
snakewine10-Oct-12 11:47 
Answercan i get this calendar in multilanguage?? please rply soon... Pin
Rachana BG23-Sep-12 21:11
Rachana BG23-Sep-12 21:11 
QuestionNot showing date in textbox using masterpage. Pin
praveenfds30-Jul-12 6:41
praveenfds30-Jul-12 6:41 
AnswerRe: Not showing date in textbox using masterpage. Pin
AlRosner9-May-13 16:51
AlRosner9-May-13 16:51 
GeneralRe: Not showing date in textbox using masterpage. Pin
Rachana BG9-May-13 20:53
Rachana BG9-May-13 20:53 
QuestionError ContontrolsExersise.calender Pin
Minhhaipr24-Dec-11 21:39
Minhhaipr24-Dec-11 21:39 
AnswerRe: Error ContontrolsExersise.calender Pin
Rachana BG25-Dec-11 19:06
Rachana BG25-Dec-11 19:06 
Open in vs2010..It works fine for me I dowloaded same code.
GeneralRe: Error ContontrolsExersise.calender Pin
Vishal Pand3y8-May-13 19:56
Vishal Pand3y8-May-13 19:56 
QuestionError in popup Pin
ORolando22-Jul-11 0:21
ORolando22-Jul-11 0:21 
AnswerRe: Error in popup Pin
Rachana BG22-Jul-11 2:27
Rachana BG22-Jul-11 2:27 
AnswerRe: Error in popup Pin
billgatesvijay22-Jul-11 2:40
billgatesvijay22-Jul-11 2:40 

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.