asp.net c# tutorials and examples code for web developers

How to use CalendarExtender in asp.net ajax

CalendarExtender in asp.net ajax
CalendarExtender is an asp.net ajax toolkit extender control. CalendarExtender can be attached to be any asp.net TextBox web server control. CalendarExtender allow us to client side date picking functionality. this calendar control provide us a customizable date format and user interface. user can click any day from calendar to select a date or simply can click the today date link to select the current date.

calendar left and right arrows allow us to navigate between months. calendar title link provide us a way to change the view of calendar such as days in the current month, months in current year, years in the current decade. this feature is great to quickly jump any date in the past or future in calendar.

CalendarExtender control have the following built in properties those are TargetControlID, CssClass, Format, PopupButtonID, PopupPosition, SelectedDate, StartDate and EndDate.

CalendarExtender TargetControlID property value specify the TextBox server control which we want to extend as an ajax calendar control. Format property allow us to apply various date formatting to display calendar selected date.

we can use an Image server control to display as a calendar icon near TextBox. we just need to set the PopupButtonID property value to that Image control ID. when user click the image, then the calendar will pop up. if we does not set PopupButtonID property value then calendar will pop up only when TextBox control receive focus.

CalendarExtender SelectedDate property value indicate calendar initializing date. StartDate and EndDate property specify the available start and end range of date selection.

CalendarExtender have a default css collection. but we can customize the default look and feel of calendarExtender using its CssClass property. this property override the default css style of CalendarExtender.

CalendarExtender have many css classes that we can customize such as ajax__calendar_container, ajax__calendar_header, ajax__calendar_title, ajax_calendar_body, ajax__calendar_days, ajax__calendar_dayname, ajax_calendar_months, ajax__calendar_years, ajax__calendar_today, ajax__calendar_hover, ajax_calendar_active etc.

those css classes can override the calendar default hover effect, title styles, day names styles, year design, month names look and feel and many more.
UsingCalendarExtender.aspx
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Drawing" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            TextBox1.ForeColor = Color.LightGoldenrodYellow;
            TextBox1.ForeColor = Color.DeepPink;
            TextBox1.Font.Bold = true;
            TextBox1.Font.Size = FontUnit.Medium;
            TextBox1.Font.Name = "Comic Sans MS";
        }
    }    
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Ajax CalendarExtender - How to use CalendarExtender in asp.net ajax</title>
    <style type="text/css">
        .CalendarCSS
        {
            background-color:OrangeRed;
            color:Snow;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:DarkBlue; font-style:italic;">Ajax Control Toolkit Example: Using CalendarExtender</h2>
        <hr width="500" align="left" color="CornFlowerBlue" />
        <asp:ScriptManager 
            ID="ScriptManager1"
            runat="server"
            >
        </asp:ScriptManager>
        <cc1:CalendarExtender 
            ID="CalendarExtender1"
            runat="server"
            TargetControlID="TextBox1"  
            CssClass="CalendarCSS"
            >
        </cc1:CalendarExtender>
        <asp:Label 
            ID="Label1" 
            runat="server"
            ForeColor="DodgerBlue"
            Font-Italic="true"
            Font-Names="Comic Sans MS"
            Font-Size="Large"
            Text="Arrival Date: "
            Font-Underline="true"
            >
        </asp:Label>
        <asp:TextBox 
            ID="TextBox1"
            runat="server"
            >
        </asp:TextBox>
    </div>
    </form>
</body>
</html>
Related asp.net example