Customized AJAX Calendar Control CSS Example

by top54u.com 22 May, 2008

Inside ASP .NET Tutorials | ASP.Net AJAX

AJAX Calendar Extender CSS Theme

ASP.Net Dynamic AJAX Dropdown Menu Extender Control

ASP.Net 2.0 AJAX Update Progress Control

ASP.Net Repeater Control HTML UL LI CSS Styles

ASP.Net AJAX Extension Controls

How to install AJAX Control Toolkit

ASP.Net AJAX Timer Control

Spotlight.....

You can change the look and feel of AJAX calendar control by overriding the default CSS classes. You can learn about default CSS classes of Calendar control in the last article: Ajax calendar extender CSS theme. Create your own CSS for calendar control using user defined name for the new CSS class that would be used to set the CssClass property of Calendar control.

You can customize the look and feel of calendar control similar to the following calendar figure:

Create a CSS stylesheet with name calendar.css and save to in the same directory having the asp.net web page in which you want to link it.

Copy and paste the following CSS code in calendar.css file.

CSS code:

.cal_Theme1 .ajax__calendar_container

{

background-color: #e2e2e2; border:solid 1px #cccccc;

}

.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: #e9e9e9; border: solid 1px #cccccc;

}

.cal_Theme1 .ajax__calendar_dayname

{

text-align:center; font-weight:bold; margin-bottom: 4px; margin-top: 2px;

}

.cal_Theme1 .ajax__calendar_day

{

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: #ffffff;

}

.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;

}

HTML code for AJAX Calendar Control ASP.Net web page

<html>
<head runat="server">
    <title>AJAX Calendar Theme</title>
    <link href="calendar.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" CssClass="cal_Theme1"
                TargetControlID="TextBox1" PopupPosition="Right">
            </ajaxToolkit:CalendarExtender>
        </div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </form>
</body>
</html>

Note: CssClass Property of ajaxToolkit CalendarExtender is set as cal_Theme1.
It will inherit the styles defined in the calendar.css file to change the look and feel of the calendar control.

Spotlight.....

Currently rated 5.0 by 1 people