Customized CSS Styles for AJAX Calendar Control

By: Suresh Dasari 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

/*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>

<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

13 comments :

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

Darshan; June 13, 2011 at 3:42 AM
Suresh Dasari said...: Thanks Darshan Keep visiting....; June 13, 2011 at 5:21 AM
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..; March 5, 2012 at 10:37 PM
Anonymous said...: your website is very helpful. Please give more assignments to work on.; May 9, 2012 at 4:35 AM
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?; May 14, 2012 at 3:51 AM
Shah Rizar said...: awesome!; May 14, 2013 at 8:23 PM
KALPESH said...: hi suresh i want fill Background Color On Today Date; September 3, 2013 at 3:22 AM
Anonymous said...: thanks a lot buddy; September 22, 2013 at 10:25 AM
Anonymous said...: @kalpesh: write a style like .cal_Theme1 .ajax__calendar_today { background-color: red; }

Best Reagrds; January 23, 2014 at 9:35 PM
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.....; January 23, 2014 at 9:41 PM
Anonymous said...: Thank you, really great help. :)
Burak; May 19, 2014 at 1:39 PM
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; July 17, 2014 at 3:22 PM
ahmed ezzat said...: you are amazing and proffesional; November 13, 2017 at 10:19 AM