Hello in this post i will be showing how to add CSS or theme to a Ajax Calendar in asp.net.
Example :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajaxCalendar.aspx.cs" Inherits="ajaxCalendar" %>
<%@ 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></title>
<style type="text/css">
.ajax__calendar_container
{
background-color: #ffffff;
border: 1px solid #d0d0d0;
}
.ajax__calendar_title
{
background-color: #d0d0d0;
padding: 3px;
}
.ajax__calendar_body
{
border: 0px;
}
.ajax__calendar_container TD
{
padding: 0px;
margin: 0px;
font-size: 11px;
}
.ajax__calendar .ajax__calendar_dayname
{
border-bottom: 1px solid #000;
}
.ajax__calendar_dayname
{
height: 17px;
width: 18px;
text-align: right;
padding: 0px 2px;
}
.ajax__calendar .ajax__calendar_active .ajax__calendar_day
{
background-color: #edf9ff;
border: 1px solid #0066cc;
color: #0066cc;
}
.ajax__calendar .ajax__calendar_day
{
border: 1px solid #ffffff;
}
.ajax__calendar .ajax__calendar_active .ajax__calendar_day
{
background-color: #000000;
color: #ffffff;
}
.ajax__calendar .ajax__calendar_day
{
border: 1px solid #ffffff;
}
.ajax__calendar_day
{
height: 17px;
width: 18px;
text-align: right;
padding: 0px 2px;
cursor: pointer;
}
.ajax__calendar_today
{
background-color: #d0d0d0;
color: #545454;
}
.ajax__calendar_hover .ajax__calendar_today
{
color: #000000;
}
.caltheme table tr td
{
padding: 0;
margin: 0; /*background-color:White;*/
padding-right: 0px;
padding-left: 0px;
border: 0px;
}
.caltheme td:hover
{
background-color: #545454;
color: #ffffff;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
<ajax:CalendarExtender ID="CalendarExtender1" TargetControlID="txtDate" CssClass="caltheme"
runat="server" Format="dd/MM/yyyy">
</ajax:CalendarExtender>
</div>
</form>
</body>
</html>
Example :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajaxCalendar.aspx.cs" Inherits="ajaxCalendar" %>
<%@ 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></title>
<style type="text/css">
.ajax__calendar_container
{
background-color: #ffffff;
border: 1px solid #d0d0d0;
}
.ajax__calendar_title
{
background-color: #d0d0d0;
padding: 3px;
}
.ajax__calendar_body
{
border: 0px;
}
.ajax__calendar_container TD
{
padding: 0px;
margin: 0px;
font-size: 11px;
}
.ajax__calendar .ajax__calendar_dayname
{
border-bottom: 1px solid #000;
}
.ajax__calendar_dayname
{
height: 17px;
width: 18px;
text-align: right;
padding: 0px 2px;
}
.ajax__calendar .ajax__calendar_active .ajax__calendar_day
{
background-color: #edf9ff;
border: 1px solid #0066cc;
color: #0066cc;
}
.ajax__calendar .ajax__calendar_day
{
border: 1px solid #ffffff;
}
.ajax__calendar .ajax__calendar_active .ajax__calendar_day
{
background-color: #000000;
color: #ffffff;
}
.ajax__calendar .ajax__calendar_day
{
border: 1px solid #ffffff;
}
.ajax__calendar_day
{
height: 17px;
width: 18px;
text-align: right;
padding: 0px 2px;
cursor: pointer;
}
.ajax__calendar_today
{
background-color: #d0d0d0;
color: #545454;
}
.ajax__calendar_hover .ajax__calendar_today
{
color: #000000;
}
.caltheme table tr td
{
padding: 0;
margin: 0; /*background-color:White;*/
padding-right: 0px;
padding-left: 0px;
border: 0px;
}
.caltheme td:hover
{
background-color: #545454;
color: #ffffff;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
<ajax:CalendarExtender ID="CalendarExtender1" TargetControlID="txtDate" CssClass="caltheme"
runat="server" Format="dd/MM/yyyy">
</ajax:CalendarExtender>
</div>
</form>
</body>
</html>
Output:
 |
| 1. Before Applying CSS |
 |
| 2. After Applying CSS |
No comments:
Post a Comment