The basic behavior of the control is that at runtime we only see the
Button and the TextBox. When the button is clicked, the <DIV>
display style is toggled, making the calendar control appear to expand
or collapse—that is, appear to drop down or fold up, depending on its
The button acts like a toggle switch: It changes the state of the DIV
containing the calendar. If the calendar is retracted, pushing the
button will show the calendar. If the calendar is expanded, clicking the
button will retract the calendar. This behavior occurs on the client
without a round trip to the server. Additionally, the position of the
calendar control needs to appear as it hangs from the bottom of the
TextBox. All of this behavior is managed with attribute values and
client-side script as summarized:
- Manage the <DIV> tag's display style
- Absolutely position the calendar control immediately below the TextBox and Button
- Respond to the Button's Click event on the client
- Respond to a selection in the calendar
Listing 1 shows the HTML supporting all of these behaviors except the last one, which we will implement in the code-behind.
Listing 1: HTML supporting the calendar control.
<%@ Control Language="vb" AutoEventWireup="false"
<%asp:TextBox id="TextBox1" runat="server"><%/asp:TextBox>
<%INPUT type="button" value="..." onclick="OnClick()"><%br>
<%div id="divCalendar" style="DISPLAY: none; POSITION: absolute">
<%asp:Calendar id="Calendar1" runat="server" BorderWidth="2px"
ForeColor="Black" Height="180px" Font-Size="8pt"
BorderStyle="Outset" DayNameFormat="FirstLetter" CellPadding="4">
<%TodayDayStyle ForeColor="Black" BackColor="#CCCCCC">
<%DayHeaderStyle Font-Size="7pt" Font-Bold="True"
<%SelectedDayStyle Font-Bold="True" ForeColor="White"
<%TitleStyle Font-Bold="True" BorderColor="Black"
if( divCalendar.style.display == "none")
divCalendar.style.display = "";
divCalendar.style.display = "none";
The various parts of the implementation described in the summary
block are shown in bold font. The HTML style="DISPLAY: none; POSITION:
absolute" indicates how and where the Calendar is displayed. DISPLAY:
none means the <DIV> and its contents are effectively invisible.
The style POSITION: absolute means that the calendar will show up
precisely where it was placed, resulting in its appearing to be attached
to the TextBox.
The <script> block contains a function named OnClick. This
function is the OnClick event handler for the HTML button Input control
(near the top of the listing). The OnClick event toggles the display
style of the <DIV> control. A value of "none" means the
<DIV> is invisible and a value of "" means that the <DIV>
and the Calendar it contains are visible.
hope this will help you