How do I incease the width of CalendarExtender?

All,

I'm not able to increase the width of the calendar extender. I changed the width inside Calendar.css and set the property of CalendarExtender to point to this css class. Yet I don't see the changes. Do I need to put the class name as the "CssClass" value or should it be the filename (Calendar.css)?

Hi VivekSriAus,

Please read this: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Calendar/Calendar.aspx

Here they say that the default css will be used, except for the values that you override.

I made the width of the calendar change by doing the following:
(Note that I see the width increase but that the style in a whole is not perfect! I'm just showing you how to play around with it!)

<cc1:CalendarExtender ID="CalendarExtender1"
runat="server" Enabled="True" TargetControlID="TextBox1"CssClass="test">
</cc1:CalendarExtender
<style type="text/css">
.test.ajax__calendar_body
{
width:500px;
}
</style>

Go to the link if you want to know where you should override what style. On the link they talk about the css.

Kind regards,
Wim

Thanks for the reply. Although that helped me solve the "width" issue, I'm losing all the other styles. How do I add style to, say, ajax__Calendar_previous? I can't use the same class name, right?

Hi,

Ok maybe this is a bit better style:

.test.ajax__calendar_container {padding:10px;position:absolute;cursor:default;width:350px;font-size:15px;text-align:center;font-family:tahoma,verdana,helvetica;background-color:lemonchiffon;border:1pxsolid#646464;}

But just play around with it a bit.

In the toolkit example is also a calendar with custom styling.

Also, go to the Calendar.css and check out the styles ... play around with them.

You also must read this:

http://mattberseth.com/blog/2007/10/theming_the_ajaxcontroltoolkit.html

Kind regards,
Wim