Customized AJAX Calendar Control CSS Example

Updated on 18 Apr 2012,
Published on 27 May 2008

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.

AJAX Control Toolkit Examples:

You can see the live samples and examples of AJAX Control Toolkit from the following links:

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

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<asp:TextBox ID="TextBox1" runat="server" Width="200px"></asp:TextBox>

<asp:Image ID="Image1" runat="server" ImageUrl="images/Calendar.png" /> 
<ajaxToolkit:CalendarExtender 
    CssClass="cal_Theme1" 
    ID="CalendarExtender1" 
    runat="server" 
    PopupButtonID="Image1"
    PopupPosition="Right"
    TargetControlID="TextBox1">
</ajaxToolkit:CalendarExtender>

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.

Output:

You can see the output of above discussed code from the following link:

AJAX Calendar Control CSS Theme Styles

Continue to next tutorial: ASP.Net AJAX Cascading Dropdown Control Extender to learn how to load the data items into the dropdown list controls using AJAX.

9 Responses to "Customized AJAX Calendar Control CSS Example"
Ravi
thank you very much,, this is very good example
deepa
this is good.. but there is no option like "popupposition". i want the calendar to popup above the textbox.. can u help?? plz
readiejr
There is a property named PopupPosition which defines where the calendar appears in relation to the textbox. In the code example above it is set to PopupPosition="Right".

If you want it to open above the textbox simply set it to TopLeft or TopRight.

See http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Calendar/Calendar.aspx for further details.
Muy bueno el artículo, gracias!
c:\windows
thanx for this!!!!
Chandresh
I want to highlight current date(Today) cube(box) in calendar control. Thanks in advance for support.
Serg
Way to go MAN! Thanks!
kris
very useful, thanks much!
Kamlesh singh
u can use css class
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email