Ajax CalendarExtender, Ajax Control Toolkit Example, How to use Ajax CalendarExtender in ASP.Net

Calendar Extender of AJAX Control Toolkit for ASP.Net 2.0 frameworks provides the AJAX based client side functionality to pick the date from popup calendar extender control. You can customize the date format and also the style of calendar user interface using CSS. AJAX Calendar control sets the date clicked by the user into the associated Textbox.

<%@ 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)
{
TextBoxExample.ForeColor = Color.LightGoldenrodYellow;
TextBoxExample.ForeColor = Color.DeepPink;
TextBoxExample.Font.Bold = true;
TextBoxExample.Font.Size = FontUnit.Medium;
TextBoxExample.Font.Name = "Comic Sans MS";
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Ajax CalendarExtender Example, How to use Ajax CalendarExtender in ASP.Net</title>
<style type="text/css">
.CSSCalendarexample
{
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="ScriptManagerExample"
runat="server"
>
</asp:ScriptManager>
<cc1:CalendarExtender
ID="CalendarExtenderExample"
runat="server"
TargetControlID="TextBoxExample"
CssClass="CSSCalendarexample"
>
</cc1:CalendarExtender>
<asp:Label
ID="LabelExample"
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="TextBoxExample"
runat="server"
>
</asp:TextBox>
</div>
</form>
</body>
</html>

Properties of Ajax CalendarExtender:

Animate: Accepts value as true/false. If true then it animates the calendar actions.

FirstDayOfWeek: It is an enumerator type collection that specifies to display the first of week in the calendar at runtime.

Format: You can set the different date formats using date formats e.g.: MMM dd, yyyy; MMM DDD dd, yyyy.

PopUpButtonID: You can specify the ID of image control, button control or linkbutton control to popup the calendar control. If PopUpButtonID is not specified then Calendar control popups when associated textbox gets focus.

PopUpPosition: This property sets the position of calendar control, that where should it appear such as BottomLeft of textbox, BottomRight, TopLeft, TopRight, Right or Left.

SelectedDate: You can specify the default date for the Calendar using SelectedDate Property. Calendar control initializes with the specified date.

TargetControlID: Specify the target TextBox ID in this property that will display the user selected date in the specified date format.
Tags: ,
Hot on Web:


About author