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>
<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>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>
