Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Navigating to a specific month and an year in an asp.net calendar control - Part 111

Suggested Videos
Part 108 - Events and delegates in c#
Part 109 - Loading user controls dynamically
Part 110 - Loading asp.net controls dynamically



This question was asked by 3 to 4 youtube subscribers of my channel. There are several reasons or situations in real time, where we need to navigate to a specific month and an year in an asp.net calendar control. For example, if the date of birth of a person is in the year 1960, we may have to click on the calendar control several times to navigate to that year.

Let's see, how to skip months and years, so that the dates that are too far in the past or future can be easily selected. To achieve this



Step 1: Create an XML file with name Years.XML. Copy and paste the following XML.
<?xml version="1.0" encoding="utf-8" ?>
<Years>
  <Year>
    <Number>2000</Number>
    <Value>2000</Value>
  </Year>
  <Year>
    <Number>2001</Number>
    <Value>2001</Value>
  </Year>
  <Year>
    <Number>2002</Number>
    <Value>2002</Value>
  </Year>
  <Year>
    <Number>2003</Number>
    <Value>2003</Value>
  </Year>
  <Year>
    <Number>2004</Number>
    <Value>2004</Value>
  </Year>
  <Year>
    <Number>2005</Number>
    <Value>2005</Value>
  </Year>
  <Year>
    <Number>2006</Number>
    <Value>2006</Value>
  </Year>
  <Year>
    <Number>2007</Number>
    <Value>2007</Value>
  </Year>
  <Year>
    <Number>2008</Number>
    <Value>2008</Value>
  </Year>
  <Year>
    <Number>2009</Number>
    <Value>2009</Value>
  </Year>
  <Year>
    <Number>2010</Number>
    <Value>2010</Value>
  </Year>
  <Year>
    <Number>2011</Number>
    <Value>2011</Value>
  </Year>
  <Year>
    <Number>2012</Number>
    <Value>2012</Value>
  </Year>
  <Year>
    <Number>2013</Number>
    <Value>2013</Value>
  </Year>
</Years>

Step 2: Create an XML file with name Months.XML. Copy and paste the following XML.
<?xml version="1.0" encoding="utf-8" ?>
<Months>
  <Month>
    <Number>1</Number>
    <Name>January</Name>
  </Month>
  <Month>
    <Number>2</Number>
    <Name>February</Name>
  </Month>
  <Month>
    <Number>3</Number>
    <Name>March</Name>
  </Month>
  <Month>
    <Number>4</Number>
    <Name>April</Name>
  </Month>
  <Month>
    <Number>5</Number>
    <Name>May</Name>
  </Month>
  <Month>
    <Number>6</Number>
    <Name>June</Name>
  </Month>
  <Month>
    <Number>7</Number>
    <Name>July</Name>
  </Month>
  <Month>
    <Number>8</Number>
    <Name>August</Name>
  </Month>
  <Month>
    <Number>9</Number>
    <Name>September</Name>
  </Month>
  <Month>
    <Number>10</Number>
    <Name>October</Name>
  </Month>
  <Month>
    <Number>11</Number>
    <Name>November</Name>
  </Month>
  <Month>
    <Number>12</Number>
    <Name>December</Name>
  </Month>
</Months>

Step 3: Copy and paste the following HTML in any webform
<div style="font-family:Arial">
    Year :
    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 
        onselectedindexchanged="DropDownList1_SelectedIndexChanged">
    </asp:DropDownList>&nbsp;
    Month:
    <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True" 
        onselectedindexchanged="DropDownList2_SelectedIndexChanged">
    </asp:DropDownList>
    <br />
    <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
        Text="Get Selected Date" />
</div>

Step 4: Copy and paste the following code in the code-behind file
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        LoadYears();
        LoadMonths();
    }
}

private void LoadMonths()
{
    DataSet dsMonths = new DataSet();
    dsMonths.ReadXml(Server.MapPath("~/Data/Months.xml"));

    DropDownList2.DataTextField = "Name";
    DropDownList2.DataValueField = "Number";

    DropDownList2.DataSource = dsMonths;
    DropDownList2.DataBind();
}

private void LoadYears()
{
    DataSet dsYears = new DataSet();
    dsYears.ReadXml(Server.MapPath("~/Data/Years.xml"));

    DropDownList1.DataTextField = "Number";
    DropDownList1.DataValueField = "Number";

    DropDownList1.DataSource = dsYears;
    DropDownList1.DataBind();
}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    int year = Convert.ToInt16(DropDownList1.SelectedValue);
    int month = Convert.ToInt16(DropDownList2.SelectedValue);
    Calendar1.VisibleDate = new DateTime(year, month, 1);
    Calendar1.SelectedDate = new DateTime(year, month, 1);
}

protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
{
    int year = Convert.ToInt16(DropDownList1.SelectedValue);
    int month = Convert.ToInt16(DropDownList2.SelectedValue);
    Calendar1.VisibleDate = new DateTime(year, month, 1);
    Calendar1.SelectedDate = new DateTime(year, month, 1);
}

protected void Button1_Click(object sender, EventArgs e)
{
    Response.Write(Calendar1.SelectedDate.ToShortDateString());
}

At this point, run the project and you should be able to skip to any month and year in an asp.net calendar control. This code can be encapsulated in an user control, and reused anywhere in the entire project.

2 comments:

  1. thanx for the videos, i copied your code but there is an error like this "A column named 'Number' already belongs to this DataTable: cannot set a nested table name to the same name." on the READ years.xml ide says that A COLUMN named NUMBER is already belongs to this datatable. but on the other hand month method are working perfectly fine. it will be great if you provide any solutions. thanks

    ReplyDelete
  2. Hi
    I really liked your codes, it's so useful but am wondering how to show calendar for two selected month. Thanks

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.