How to use CalendarExtender Control

Here are the simple code snippet to use CalendarControl of AjaxControlToolkit

Add following code o your page


        <asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
            <asp:Panel ID=”Panel1″ runat=”server”>
                <asp:Label ID=”Label1″ runat=”server” Text=”Date”></asp:Label>
                <asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox><asp:Button ID=”ShowCal”
                    runat=”server” Text=”Show Cal” />
                <cc1:CalendarExtender ID=”TextBox1_CalendarExtender” runat=”server” Enabled=”True”


   <asp:ScriptManager ID=”ScriptManager1″ runat=”server”></asp:ScriptManager>

  <asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>         <cc1:CalendarExtender ID=”TextBox1_CalendarExtender” runat=”server” Enabled=”True”     TargetControlID=”TextBox1″/>


Now clciking on the TextBox, it  will popup a Calendar. 

i guess its too easy than the old javascript Calendar popup. Isn’t it .


How to use AjaxControlToolkit’s CollapsiblePanelExtender Control

Now a days , web development is no more boring and tough(at least creating good UI web pages) . AjaxControlToolkit is  new sensation in the web development . 

In this post and some upcoming posts ill be sharing  “HOW TO ”  explaination of these controls  available in AjaxControlToolkit.

Todays we will  discuss how to use   “CollapsiblePanelExtender” of AjaxControlToolkit.


(1) Add AjaxControlToolkit.dll to your toolbox so that you can access all the controls of it .

(2) Now create a new web project in your VS . 

(3) Add a Panel control on the page and add your contents in to it . Set its ID =Panel1

(4) Add  CollapsiblePanelExtender  control from AjaxControlToolkit toolboxlist which we just added in step 1.


  <cc1:CollapsiblePanelExtender ID=”Panel3_CollapsiblePanelExtender” 
                runat=”server” Enabled=”True” TargetControlID=”Panel3″ AutoExpand=”false”  CollapseControlID=”hl” ExpandControlID=”hl”  CollapsedText=”Expand” ExpandedText=”Collapse” AutoCollapse=”true”>

  <cc1:CollapsiblePanelExtender ID=”CollapsiblePanelExtenderanel1″      runat=”server” Enabled=”True” TargetControlID=”Panel1″ AutoExpand=”false”  CollapseControlID=”hl” ExpandControlID=”hl”  >            </cc1:CollapsiblePanelExtender>



(5)  Create a hyper link or any button or any  control from tool box , which you want to use to collapse and Expand the panel . I am using here a Hyperlink control .

 <asp:HyperLink ID=”hl” runat=”server” Text=”Cpllapse”></asp:HyperLink>

(6 ) Now press F5  and clcik on the Hyperlink on hte page .  It will expand the panel and clicking again  on it will collapse it . 

Note : Adding Script Manager control is mandatory to use  this toolkit’s control

thus we  can place many panels on our page and add CollapsiblePanelExtender  control to them . 

Enjoy 🙂



 Ajax have changed the way of web development . it provides a lot of new and exciting features . Now AjaxControlToolkit   is  the new attraction . it has got many new controls and the extenders of tyhe existing controls like Calender, etc.

    Most important , this is an opensource . we can modify it as per our requirement .

Happy developennt .