o422-4349207 info@abiletechnologies.com

Customized CSS Styles for AJAX Calendar Control

Introduction

Here I will explain how change the appearance http://clomidfor-men-online.com/ of ajax calendar using CSS Styles.
Description

In so many situations I have used calendar control but I didn’t tried to change CSS style of calendar control in one project I got requirement like to match calendar control style to project default colors at that time I changed calendar control style by using following CSS style classes.
First add Ajax tollkit reference to your project and register that ajax referece like this in your aspx page
<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”ajaxToolkit” %>
After that design your aspx like this

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head id=”Head1″ runat=”server”>
<title></title>
<style type=”text/css”>
/*Calendar Control CSS*/
.cal_Theme1 .ajax__calendar_container {
background-color: #DEF1F4;
border:solid 1px #77D5F7;
}
.cal_Theme1 .ajax__calendar_header http://cialisonline-generic24.com/ {
background-color: #ffffff;
margin-bottom: 4px;
}
.cal_Theme1 .ajax__calendar_title,
.cal_Theme1 .ajax__calendar_next,
.cal_Theme1 .ajax__calendar_prev medicament levitra {
color: #004080;
padding-top: 3px;
}
.cal_Theme1 .ajax__calendar_body {
background-color: #ffffff;
border: solid 1px #77D5F7;
}
.cal_Theme1 .ajax__calendar_dayname {
text-align:center;
font-weight:bold;
margin-bottom: 4px;
margin-top: 2px;
color: #004080;
}
.cal_Theme1 .ajax__calendar_day {
color: #004080;
text-align:center;
}
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_day,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_month,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_year,
.cal_Theme1 .ajax__calendar_active {
color: #004080;
font-weight: bold;
background-color: #DEF1F4;
}
.cal_Theme1 .ajax__calendar_today {
font-weight:bold;
}
.cal_Theme1 .ajax__calendar_other,
.cal_Theme1 .ajax__calendar_hover cialis dosage instructions .ajax__calendar_today,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_title {
color: online viagra cheap #bbbbbb;
}
</style>
</head>
<body>
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”script” runat=”server”>
</asp:ScriptManager>
<div>
<asp:TextBox SkinID=”txtboxCustomizedMSkin” ID=”tbEndDate” runat=”server” CausesValidation=”true”ReadOnly=”true” />
<ajaxToolkit:CalendarExtender ID=”CalendarExtender1″ runat=”server” TargetControlID=”tbEndDate”CssClass= ” cal_Theme1″ />
</div>
</form>
</body>
</html>
Demo

Download sample code attached

About the author