This article will show you how you can apply a custom them
or style to a ajaxcontroltoolkit CalendarExtender in asp.net using style sheet
css.
Some of my previous articles are as follows: AjaxControlToolkit
CalendarExtender to Display Calendar in Asp.net on Textbox Click, How
to Use and Install Ajaxcontroltoolkit in Asp.Net, Autocomplete
Textbox in Asp.Net With DataBase Using C# AjaxControlToolkit, Example
of Ajax Control Toolkit ModalPopupExtender In Asp.Net, GridView
With Autocomplete Textbox Using AutoCompleteExtender in Asp.net Using C#.Net, AjaxControlToolkit
ModalPopupExtender With AutoCompleteExtender In Asp.Net Using C#.Net.
So for this article first we will create a new asp.net application and add the below code into the .asp page.
So for this article first we will create a new asp.net application and add the below code into the .asp page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1"
%>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="asp"
%>
<!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>CalendarExtender
Example For Custom Style Css and Date Format Uaing Asp.net and Css</title>
<style>
.teamCalendar
.ajax__calendar_container
{
border:
2px solid black;
background-color:
Maroon;
font-size:
11px;
color:
Blue;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<b>DOB : </b>
<asp:TextBox ID="TextBox1" runat="server" Width="200px" autocomplete="off"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" runat="server"
TargetControlID="TextBox1"
PopupPosition="BottomLeft"
CssClass="teamCalendar">
</asp:CalendarExtender>
</form>
</body>
</html>
|
In above code I have set the TargetControlID as the textbox id. So when user click on textbox calendar will open. In this check the CssClass name. This will change the calendar look and feel.
Now we have done run the application and check the output.
About the Author
0 comments:
Please let me know your view