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

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.

No comments