ASP.NET - how to display the calender control on button

Asked By mohammed on 21-Dec-10 02:18 AM
i want a calender in my webform when it load a webform the calender should be look like a buton
SVK N replied to mohammed on 21-Dec-10 02:23 AM
use ajax  CalendarExtender
Reena Jain replied to mohammed on 21-Dec-10 02:27 AM

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 current state.

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"
    TargetSchema="" %>
<%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"
                BackColor="White" Width="200px"
    ForeColor="Black" Height="180px" Font-Size="8pt"
                      Font-Names="Verdana" BorderColor="#999999"
    BorderStyle="Outset" DayNameFormat="FirstLetter" CellPadding="4">
    <%TodayDayStyle ForeColor="Black" BackColor="#CCCCCC">
    <%SelectorStyle BackColor="#CCCCCC"><%/SelectorStyle>
    <%NextPrevStyle VerticalAlign="Bottom"><%/NextPrevStyle>
    <%DayHeaderStyle Font-Size="7pt" Font-Bold="True"
    <%SelectedDayStyle Font-Bold="True" ForeColor="White"
    <%TitleStyle Font-Bold="True" BorderColor="Black"
    <%WeekendDayStyle BackColor="#FFFFCC"><%/WeekendDayStyle>
    <%OtherMonthDayStyle ForeColor="#808080"><%/OtherMonthDayStyle>
function OnClick()
  if( == "none") = "";
  else = "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
mohammed replied to Reena Jain on 21-Dec-10 03:26 AM
hi iam looking code for calender should be displayed on button click
Anoop S replied to mohammed on 21-Dec-10 03:40 AM
You can use ajax calender for that
<ajaxToolkit:Calendar runat="server"
    Format="MMMM d, yyyy"
    PopupButtonID="Image1" />
  • TargetControlID - The ID of the TextBox to extend with the calendar.
  • CssClass - Name of the CSS class used to style the calendar. See the Calendar Theming section for more information.
  • Format - Format string used to display the selected date.
  • PopupButtonID - The ID of a control to show the calendar popup when clicked. If this value is not set, the calendar will pop up when the textbox receives focus.
  • PopupPosition - Indicates where the calendar popup should appear at the BottomLeft(default), BottomRight, TopLeft, TopRight, Left or Right of the TextBox.
  • SelectedDate - Indicates the date the Calendar extender is initialized with.