Completed Enhanced Calendar Demo

This demo shows the completed, enhanced Calendar Web control. Note that when the month/year DropDownLists' values are changed it precipitates a postback and the Calendar's display date is automatically updated. Also, the HTML markup has been modified to give the appearance of the DropDownList controls being part of the Calendar control, as opposed to separate entities.


SunMonTueWedThuFriSat
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789


Source Code:
<%@ Page Language="VB" autoeventwireup="True" %>
<script runat="server">

    Sub Page_Load(sender As Object, e As EventArgs)
    
        'Hide the title of the calendar control
        myCalendar.ShowTitle = False
    
        'Populate month and year dropdown list boxes which
        'replace the original calendar title
        If Not Page.IsPostBack Then
    
            Call Populate_MonthList()
    
            Call Populate_YearList()
        End If
    
    End Sub
    
    
    Sub Set_Calendar(Sender As Object, E As EventArgs)
    
        'Whenever month or year selection changes display the calendar for that month/year        
        myCalendar.TodaysDate = CDate(drpCalMonth.SelectedItem.Value & " 1, " & drpCalYear.SelectedItem.Value)
    
    End Sub
    
    
    Sub Populate_MonthList()
    
        drpCalMonth.Items.Add("January")
        drpCalMonth.Items.Add("February")
        drpCalMonth.Items.Add("March")
        drpCalMonth.Items.Add("April")
        drpCalMonth.Items.Add("May")
        drpCalMonth.Items.Add("June")
        drpCalMonth.Items.Add("July")
        drpCalMonth.Items.Add("August")
        drpCalMonth.Items.Add("September")
        drpCalMonth.Items.Add("October")
        drpCalMonth.Items.Add("November")
        drpCalMonth.Items.Add("December")
    
        drpCalMonth.Items.FindByValue(MonthName(DateTime.Now.Month)).Selected = True
    
    End Sub
    
    
    Sub Populate_YearList()
    
        'Year list can be extended
        Dim intYear As Integer
    
        For intYear = DateTime.Now.Year - 20 to DateTime.Now.Year + 20
    
             drpCalYear.Items.Add(intYear)
        Next
    
        drpCalYear.Items.FindByValue(DateTime.Now.Year).Selected = True
    
    End Sub

</script>

<style type="text/css">
    BODY { font-family: verdana, arial, helvetica;
	}



	.calTitle   {font-weight: bold;
	             font-size: 11;
	             background-color:#cccccc;
	             color: black;
	             width: 90px;
	}



	.calBody    {font-size: 11;
	             border-width: 10px;
	}
</style>

<form id="frmCal" runat="server">
    <table cellspacing="0" cellpadding="0" width="20%" border="0">
        <tbody>
            <tr>
                <td align="left" bgcolor="#cccccc">
                    <asp:DropDownList id="drpCalMonth" Runat="Server" AutoPostBack="True" OnSelectedIndexChanged="Set_Calendar" cssClass="calTitle"></asp:DropDownList>
                </td>
                <td align="right" bgcolor="#cccccc">
                    <asp:DropDownList id="drpCalYear" Runat="Server" AutoPostBack="True" OnSelectedIndexChanged="Set_Calendar" cssClass="calTitle"></asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Calendar OtherMonthDayStyle-BackColor="White" DayStyle-BackColor="LightYellow" id="myCalendar" Runat="Server" cssClass="calBody" DayHeaderStyle-BackColor="#eeeeee" Width="100%"></asp:Calendar>
                </td>
            </tr>
        </tbody>
    </table>
</form>

[Return to the article...]