Changing the Background Color of an ASP.NET AJAX CalendarExtender

By default, an ASP.NET AJAX CalendarExtender looks similar to the following:

However if you want to change the header/background color of an ASP.NET AJAX CalendarExtender, then here's how to do it using CSS.

<head runat="server">


    <style type="text/css">

        .cal .ajax__calendar_header


              background-color: Silver;


        .cal .ajax__calendar_container


                background-color: Gray;





    <form id="form1" runat="server">


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


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

        <cc1:CalendarExtender ID="CalendarExtender1" runat="server" CssClass="cal"

        TargetControlID="TextBox1" >






After applying the CSS, the CalendarExtender will look similar to the following:

About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.


Donald W said...

I wonder why has MS made it so difficult to change the backcolor. Is there any other simpler way?

Nil said...

Nice Blog!!

Why don't you use Microsoft Live Writer that will keep your code just have to use plugin for that..try it out..

Suprotim Agarwal said...

Nil, thanks for your suggestion. I did try that sometime back but I remember the layout getting distorted in mozilla.

Are you using it? I will give it a try again. To be honest, I am currently using a CopyAsHtml Visual Studio pluging that formats the code as HTML. It's too cumbersome.

Amit said...

SyntaxHighlighter is not a bad option either