Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Customized CSS Styles for AJAX Calendar Control

Jul 30, 2010
Introduction

Here I will explain how change the appearance 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  {
background-color: #ffffff;
margin-bottom: 4px;
}

.cal_Theme1 .ajax__calendar_title,
.cal_Theme1 .ajax__calendar_next,
.cal_Theme1 .ajax__calendar_prev    {
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 .ajax__calendar_today,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_title {
color: #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



 

Related AJAX calendar control posts


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

12 comments :

Anonymous said...

Since last 3 months , i show the best example in this site .... Thanks suresh ....



Darshan

Suresh Dasari said...

Thanks Darshan Keep visiting....

Anonymous said...

hi suresh..thanks for the best articles..
i want to start writing blog.. can u plz tell me how to add demos like in these articles to my blog..

Anonymous said...

your website is very helpful. Please give more assignments to work on.

Anonymous said...

hi suresh ... i have some problem on this issue .....

instead of TODAY, its showing in arabic ... can u please tell me wats the solution?

Shah Rizar said...

awesome!

KALPESH said...

hi suresh i want fill Background Color On Today Date

Anonymous said...

thanks a lot buddy

Anonymous said...

@kalpesh: write a style like .cal_Theme1 .ajax__calendar_today { background-color: red; }


Best Reagrds

Sree said...

In he same way you change the language by adding style.

should be like....
cal_Theme1 .ajax__calendar_today { language : English;}

or you can write for parent too

Best Regard

Sree.....

Anonymous said...

Thank you, really great help. :)
Burak

Anonymous said...

it's excellent aportation!, I just say what if you put css code in a .css file doesn't work (at least me)
then you have to put into aspx page raw

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.