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">

    <title></title>

    <style type="text/css">

        .cal .ajax__calendar_header

        {

              background-color: Silver;

        }

        .cal .ajax__calendar_container

        {

                background-color: Gray; 

        }         

    </style>

</head>

<body>

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

    <div>

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

        </asp:ScriptManager>

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

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

        TargetControlID="TextBox1" >

        </cc1:CalendarExtender>

    </div>

    </form>

</body>

</html>

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

About The Author

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.

4 comments:

Donald W said...: I wonder why has MS made it so difficult to change the backcolor. Is there any other simpler way?; May 26, 2009 at 9:50 AM
Nil said...: Nice Blog!!

Why don't you use Microsoft Live Writer that will keep your code readable..you just have to use plugin for that..try it out..; May 27, 2009 at 3:15 AM
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.; May 27, 2009 at 11:21 AM
Amit said...: SyntaxHighlighter is not a bad option either; February 9, 2012 at 12:09 AM