Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to use AJAX CalendarExtender in ASP.NET

Author: Jeff Nava
Download Source Code : 1381_CalendarExtendarAjax.zip

In this article, we will see how we can use AjaxControlToolkit CalendarExtender in ASP.NET.

 

CalendarExtender is most widely used AjaxControlToolkit control from many different controls. We can attach it to TextBox control and it will provide date selector facility for user to select a specific date to enter in the TextBox. We can also use it with Image control to enter data in TextBox control. CalendarExtender popup when focus is on TextBox control or when we click on Image control. We can also disable previous and future dates in CalendarExtendar control from client side or in code file.

 
CalendarExtender Properties
 
CalendarExtender has many properties but here I will explain few of them.

Format:
It is used to set the select data format in the TextBox control. We can specify string for specific format.
 
TargetControlID: We have to set TextBox control ID in this property to enter selected date.
 
PopupButtonID: If we want to use Image control to popup CalendarExtender then set the Image control ID in this property.
 
PopupPosition: This property is used to define the CalenderExtender popup position.

CssClass: We can set style for CalendarExtender and can provide the CSS class name here.

 

  1. Open Visual Studio 2010
  2. File > New > Website
  3. Visual basic or Visual C# > ASP.NET Empty Web Site
  4. Website > Add New Item > Web Form
  5. Open Toolbox > Right Click > Add Tab
  6. Name the Tab As “AJAX Control Toolkit”
  7. Click on Tab > Choose Items
  8. Browse the “AjaxControlToolkit.dll” > Click Ok
  9. I have downloaded and extracted AJAX Control Toolkit in “Ajax” folder in “C” Drive so my path to the file is “C:\Ajax\ AjaxControlToolkit.dll” 
  10. Open web form and add a ScriptManager control from “AJAX Extensions” tab.

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
     
    ScriptManager control is necessary when you are using Ajax functionality in your application. 
     
  11. Add five TextBox controls from “Standard” tab and five CalendarExtender controls from “AJAX Control Toolkit”. Also add a <style> tag in between <head> tag and add a CSS class for CalendarExtender. Entire code in web form will look like as below.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>AjaxControlToolkit CalendarExtendar</title>
        <style type="text/css">
            .CalendarCSSClass
            {
                color:White;
                background-color:Orange;
            }
            .ajax__calendar_header 
            {
                color:Navy;
                background-color:Fuchsia; 
            }                  
            .ajax__calendar_footer 
            {
                color:Lime;
                background-color:Green;
            }
       
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <h3>Calendar Extender</h3>
            Please Select Date:
            <asp:TextBox ID="txtBoxDate" runat="server"></asp:TextBox>
            <ajax:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtBoxDate" PopupPosition="BottomLeft">
            </ajax:CalendarExtender>
     
            <h3>Calendar Extender with image</h3>
            Please Select Date:
            <asp:TextBox ID="txtBoxDate2" runat="server"></asp:TextBox>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/CalendarImage.png"
                Height="20px" Width="20px" />
            <ajax:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="txtBoxDate2" PopupButtonID="Image1">
            </ajax:CalendarExtender>
     
            <h3>Calendar Extender with date format</h3>
            Please Select Date:
            <asp:TextBox ID="txtboxDate3" runat="server"></asp:TextBox>
            <ajax:CalendarExtender ID="CalendarExtender3" runat="server" TargetControlID="txtBoxDate3" Format="MMMM d, yyyy">
            </ajax:CalendarExtender>
     
            <h3>Calendar Extender, disable previous and future dates</h3>
            Please Select Date:
            <asp:TextBox ID="txtBoxDate4" runat="server"></asp:TextBox>
            <ajax:CalendarExtender ID="CalendarExtender4" runat="server" TargetControlID="txtBoxDate4">
            </ajax:CalendarExtender>
     
            <h3>Calendar Extender with style</h3>
            Please Select Date:
            <asp:TextBox ID="txtBoxDate5" runat="server"></asp:TextBox>
            <ajax:CalendarExtender ID="CalendarExtender5" runat="server" TargetControlID="txtBoxDate5" CssClass="CalendarCSSClass">
            </ajax:CalendarExtender>
     
        </div>
        </form>
    </body>
    </html>
     
    First CalendarExtender is without any formatting, style and without Image control. I have just set the PopupPosition property of CalendarExtender. Second CalendarExtender is used with Image control. We have to set both TragetControlID and PopusoButtonID to use CalendarExtender with Image control. Third CalendarExtender is used just o show the Format property. We can specify format string for specific format in this property to show date in TextBox control. Fourth CalendarExtender is used to disable previous and future dates. We can disable it at client side or server side. I have used disabled previous and future dates in Page Load event of code behind file. In last CalendarExtender, I have displayed CalendarExtender with CSS class. This CSS class is defined above. I have also changed the color of header and footer of CalendarExtender.
     
  12. Add code below in Page Load event to disable previous and future dates in CalendarExtendar4.

    C#
     
    protected void Page_Load(object sender, EventArgs e)
    {
        CalendarExtender4.StartDate = DateTime.Now;
        CalendarExtender4.EndDate = DateTime.Now.AddDays(10);
    }
     
    VB.NET
     
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        CalendarExtender4.StartDate = DateTime.Now
        CalendarExtender4.EndDate = DateTime.Now.AddDays(10)
    End Sub
     
  13. Now see the web site in browser. Download source code from above. 

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to use multiple output parameters in SQL Server Stored Procedure in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net