When you think ASP, think...
Recent Articles xml
All Articles
ASP.NET Articles
Related Web Technologies
User Tips!
Coding Tips
spgif spgif

Book Reviews
Sample Chapters
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Stump the SQL Guru!
Web Hosts
Author an Article
spgif spgif

ASP ASP.NET ASP FAQs Feedback topnav-right
Print this Page!
Published: Wednesday, September 1, 2004

Extending the Calendar Control's Date Navigation

By Mehmet Genc


After using the Calendar control a number of times it quickly became clear that while the Calendar control was useful for selecting a date from the current, next, or previous month, the control could definitely do with a bit of improvement when users need to select dates far out in the future or past. The downside of the Calendar control is that it constricts a user to being able to only move from one month to another by clicking on the Previous/Next Month link buttons. This is fine if the target date is near the current date; after a couple of clicks you get to the desired month. But there are many situations where a user might need to, say, select a date eight months in the future. This would require that the user click on the Next Month hyperlink eight times.

While eight clicks might not seem like too big of a deal, there are plenty of other real-world examples that would require dozens of more clicks from the user. For example, a real estate Web application may need to allow the user to specify the lease end date, which could be anywhere from six months to several years in the future. A data-entry application might require that the user's birthdate be entered. Imagine trying to use a Calendar control to select the birthdate of an octogenarian - that would take over 950 clicks!

Clearly the Calendar control is not an adequate option for entering dates that may be several months or years in the future or past. However, with a bit of work we can enhance the Calendar control to include two drop-down lists, containing the months and years. This way, a user can quickly jump to a specific month or year with one click. In this article I will demonstrate how to make the Calendar control more flexible in terms of its navigation through the addition of two drop-down lists.

- continued -

First Things First: Creating a Standard Calendar Control

Before we concern ourselves with extending the Calendar control to include drop-down lists for navigating to a particular month/year, let's first create a simple page that shows just the standard ASP.NET Calendar control (see the live demo).

    <form id="frmCalendar" runat="server">
                    <asp:Calendar id="cntCalendar" Runat="Server" Width="100%" />
[View a Live Demo!]

When this page is visited, the Calendar control will be displayed in its default format, which requires that for a user to visit a particular month he must click on the next or previous month links, stepping through the calendar one month at a time.

Adding Drop-Down Lists to Jump to a Specific Month/Year

The standard Calendar control is not enough for us as we need to find a way of selecting any month in any year rather than using the Previous/Next Month links. One way of achieving this is using DropDownList controls to list all the months and the years we want to see, and then program the DropDownList controls in a way that whenever their selected index is changed the Calendar's display is updated to show the selected month and year.

At this point let's create two DropDownList controls in a table row and place them above the row where the Calendar control resides.

        <asp:DropDownList id="drpCalMonth" Runat="Server"></asp:DropDownList>
        <asp:DropDownList id="drpCalYear" Runat="Server"></asp:DropDownList>

Now we need to populate the DropDownList controls. The month DropDownList needs to be populated with the twelve months of the year. These DropDownLists are populated using the methods below in the ASP.NET page's code portion.

Sub Populate_MonthList()
    'Add each month to the list

    'Make the current month selected item in the list
    drpCalMonth.Items.FindByValue(MonthName(DateTime.Now.Month)).Selected = True
End Sub

Sub Populate_YearList()
    Dim intYear As Integer

    'Year list can be changed by changing the lower and upper 
    'limits of the For statement    
    For intYear = DateTime.Now.Year - 20 To DateTime.Now.Year + 20

    'Make the current year selected item in the list
    drpCalYear.Items.FindByValue(DateTime.Now.Year).Selected = True
End Sub

Notice that the year DropDownList is populated with the years twenty years from the past to twenty years in the future. If you wanted to populate this DropDownList with, say, all the years ten years in the past through ten years in the future, you could modify the For loop's bounds to: For intYear = DateTime.Now.Year - 10 to DateTime.Now.Year + 10. The key thing to see here is that DateTime.Now.Year returns the year of the current date.

To populate these two DropDownLists, call the two above methods in the Page_Load event handler (only on the first load of the page, and not on subsequent postbacks). That is, the Page_Load event handler should look like:

Sub Page_Load(sender As Object, e As EventArgs)
  If Not Page.IsPostBack Then
      Call Populate_MonthList()
      Call Populate_YearList()
  End If
End Sub
[View a Live Demo!]

At this point we have added and populated two DropDownLists, enhancing the user interface for the Calendar control. However, we have yet to write code that will cause the DropDownLists, upon being changed, to reload the Calendar page, showing the requested month/year. This is our next and final task...

Completing the Extended Calendar Control

We are now ready to implement the final touches on this enhancement. First, let's tailor the HTML a bit so that the DropDownLists look like they are part of the Calendar control, as opposed to two separate elements. To accomplish this, I placed the DropDownLists and Calendar control in an HTML <table> and used a stylesheet to specify some appearance-related settings (fonts, colors, and so on).

For this enhancement, I wanted the Calendar's date to automatically be updated anytime a user changed the month or year. In order to have the DropDownLists postback whenever they are changed, you need to set the AutoPostBack property to True. Also create an event handler for the DropDownLists' SelectedIndexChanged event. In my code I have both DropDownLists' SelectedIndexChanged event call a single event handler: Set_Calendar. This event handler - shown below - updates the Calendar's date based on the month and year selections.

Sub Set_Calendar(Sender As Object, E As EventArgs)
    cntCalendar.TodaysDate = CDate(drpCalMonth.SelectedItem.Value & _
                                   " 1, " &  drpCalYear.SelectedItem.Value)
End Sub
[View a Live Demo!]

As you can see in the live demo, with this addition we have created an enhanced Calendar Web control, one that allows for the user to quickly navigate to a particular month and year.


Date fields are always a headache for us developers, as we want users to populate the date fields in a certain format. I believe the Calendar control is a great tool to achieve this rather than using date validation techniques. However, the default version of the Calendar control isn't applicable to all date field types (e.g. D.O.B., or dates far into the future) as it is cumbersome to navigate. By adding a couple of DropDownLists, as I have shown in this article, you can enhance the Calendar to allow for your users to quickly reach a desired month and year.

For more information on enhancing the Calendar control, be sure to read the following 4Guys articles:

Happy programming!

  • By Mehmet Genc

  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article