Seems that I can't set the width unless I use the WebInput Width property.  I've tried everything I can think of via CssClass and the width will not use my class setting.

The styles used on the test page:

<style type="text/css">
.Ctl_Calendar
{
	background-color: #ffffff;
	border: solid 0px #DDCCCC;
	font-family: Calibri;
	font-size: 10pt;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	width: 100%;
	height: 22px;
}

.Ctl_Calendar_Frame
{
	border: solid 1px #DDCCCC;
	width: 100%;
	height: 22px;
}

.Ctl_Calendar_DropDown
{
	font-family: Webdings;
	border: none;
	background-color: white;
	color: #DDCCCC;
	cursor: pointer;
}

.Ctl_Calendar_TextBox
{
	background-color: White;
	border-style: none;
	font-family: Calibri;
	font-size: 9pt;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	border-collapse: collapse;
	width: 100%;
	height: 22px;
}
</style>

Seems that I can't set the width unless I use the WebInput Width property.  I've tried everything I can think of via CssClass and the width will not use my class setting.

<ISWebInput:WebInput ID="dt1" runat="server" IsDesignInitialize="False"
    CssClass="Ctl_Calendar" CausesValidation="False" 
    MaxDate="12/31/9998 23:59:59" MinDate="1753-01-01" UseDefaultStyle="true">

<CultureInfo CultureName="en-US"></CultureInfo>

<DisplayFormat IsEnabled="true" IsValidateOnChange="true" Type="DateTime"
    Format="dd-MMM-yy">
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</DisplayFormat>
<DateTimeEditor IsEnabled="true"></DateTimeEditor>
<EditFormat IsEnabled="true" IsValidateOnChange="true" IsValueSpinnable="true"
    ErrorText="Invalid date selected" Type="DateTime" Format="MM/dd/yyyy">
    <MaskInfo EmptyAsNull="true" MaskExpression="00/00/0000"></MaskInfo>
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</EditFormat>
<DropDownStyle>
    <Active CssClass="Ctl_Calendar_DropDown"></Active>
    <Normal CssClass="Ctl_Calendar_DropDown"></Normal>
    <Over CssClass="Ctl_Calendar_DropDown"></Over>
</DropDownStyle>
<FrameStyle>
    <Active CssClass="Ctl_Calendar_Frame"></Active>
    <Normal CssClass="Ctl_Calendar_Frame"></Normal>
    <Over CssClass="Ctl_Calendar_Frame"></Over>
</FrameStyle>
<TextBoxStyle>
    <Active CssClass="Ctl_Calendar_TextBox"></Active>
    <Normal CssClass="Ctl_Calendar_TextBox"></Normal>
    <Over CssClass="Ctl_Calendar_TextBox"></Over>
</TextBoxStyle>
    <HighLight IsEnabled="True" />
</ISWebInput:WebInput>

<br />

<ISWebInput:WebInput ID="dt2" runat="server" IsDesignInitialize="False"
    CssClass="Ctl_Calendar" CausesValidation="False" 
    MaxDate="12/31/9998 23:59:59" MinDate="1753-01-01" UseDefaultStyle="false">

<CultureInfo CultureName="en-US"></CultureInfo>

<DisplayFormat IsEnabled="true" IsValidateOnChange="true" Type="DateTime"
    Format="dd-MMM-yy">
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</DisplayFormat>
<DateTimeEditor IsEnabled="true"></DateTimeEditor>
<EditFormat IsEnabled="true" IsValidateOnChange="true" IsValueSpinnable="true"
    ErrorText="Invalid date selected" Type="DateTime" Format="MM/dd/yyyy">
    <MaskInfo EmptyAsNull="true" MaskExpression="00/00/0000"></MaskInfo>
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</EditFormat>
<DropDownStyle>
    <Active CssClass="Ctl_Calendar_DropDown"></Active>
    <Normal CssClass="Ctl_Calendar_DropDown"></Normal>
    <Over CssClass="Ctl_Calendar_DropDown"></Over>
</DropDownStyle>
<FrameStyle>
    <Active CssClass="Ctl_Calendar_Frame"></Active>
    <Normal CssClass="Ctl_Calendar_Frame"></Normal>
    <Over CssClass="Ctl_Calendar_Frame"></Over>
</FrameStyle>
<TextBoxStyle>
    <Active CssClass="Ctl_Calendar_TextBox"></Active>
    <Normal CssClass="Ctl_Calendar_TextBox"></Normal>
    <Over CssClass="Ctl_Calendar_TextBox"></Over>
</TextBoxStyle>
    <HighLight IsEnabled="True" />
</ISWebInput:WebInput>

<br />

<ISWebInput:WebInput ID="WebInput1" runat="server" IsDesignInitialize="False"
    CssClass="Ctl_Calendar" CausesValidation="False" Width="100%"
    MaxDate="12/31/9998 23:59:59" MinDate="1753-01-01" UseDefaultStyle="true">

<CultureInfo CultureName="en-US"></CultureInfo>

<DisplayFormat IsEnabled="true" IsValidateOnChange="true" Type="DateTime"
    Format="dd-MMM-yy">
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</DisplayFormat>
<DateTimeEditor IsEnabled="true"></DateTimeEditor>
<EditFormat IsEnabled="true" IsValidateOnChange="true" IsValueSpinnable="true"
    ErrorText="Invalid date selected" Type="DateTime" Format="MM/dd/yyyy">
    <MaskInfo EmptyAsNull="true" MaskExpression="00/00/0000"></MaskInfo>
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</EditFormat>
<DropDownStyle>
    <Active CssClass="Ctl_Calendar_DropDown"></Active>
    <Normal CssClass="Ctl_Calendar_DropDown"></Normal>
    <Over CssClass="Ctl_Calendar_DropDown"></Over>
</DropDownStyle>
<FrameStyle>
    <Active CssClass="Ctl_Calendar_Frame"></Active>
    <Normal CssClass="Ctl_Calendar_Frame"></Normal>
    <Over CssClass="Ctl_Calendar_Frame"></Over>
</FrameStyle>
<TextBoxStyle>
    <Active CssClass="Ctl_Calendar_TextBox"></Active>
    <Normal CssClass="Ctl_Calendar_TextBox"></Normal>
    <Over CssClass="Ctl_Calendar_TextBox"></Over>
</TextBoxStyle>
    <HighLight IsEnabled="True" />
</ISWebInput:WebInput>

The first calendar uses the default style, the second does not and the third uses the Width property.  Note that only the third one works because it explicitly uses the Width property.  The first and second do not adhere to the CssClass which has the width set to 100%.

You can put the code above in a table and set the cell width to, say, 400px and you'll see that only the third object sizes to fit the cell, the other two do not.

Also, the calendar that does not use the default style, i.e., UseDefaultStyle="false" crashes when I try to pull it down with the error "Microsoft Javascript runtime error: 'd' is null or not an object."  The javascript code snippet it breaks at is the dotfuscated v4e272.d.innertHTML=vde196; where v4e272 is valid but d is indeed null.