Applying CSS to Calendar

[MattC]

I am having trouble setting the color of the numbers in a calender control,
here's what i am using, also the background in title is silver as is the
selected day not matter what color I set the background-color to, I think
this si due to the fact taht the css is applyed to the Table and the
subsequest TD gets set to silver.

My CSS is simply at best how can i set the background-color and links color
of nested elements, I have tried things like:

table.calendartitle td{}, or .calendardays a, but I'm not sure of the
syntax.

..calendar
{
border-right:solid 1px #6699CC;
border-bottom:solid 1px #6699CC;
border-top:solid 1px #1b5086;
border-left:solid 1px #1b5086;
}

..calendartitle
{
font-size:14px;
color:WhiteSmoke;

FILTERrogidXImageTransform.Microsoft.Gradient(endColorstr='#1b5086',star
tColorstr='#4e82b9', gradientType='0');
BORDER-BOTTOM: #1b5086 1px solid;
BORDER-TOP: #6699CC 1px solid;
background-color: #4e82b9;
}

..calendarheader
{
font-weight:bold;
background-color: #1b5086;
color:WhiteSmoke;
border: solid 1px Whitesmoke;
}

..calendardays
{
background-color: #4e82b9;
color:WhiteSmoke;
border: solid 1px #1b5086;
}

..calendarselected
{
background-color: WhiteSmoke;
color: #4e82b9;
border: solid 1px #1b5086;
}

<asp:Calendar id="_dateselector" runat="server" CssClass="calendar"
DayNameFormat="Full">
<DayStyle CssClass="calendardays"></DayStyle>
<DayHeaderStyle CssClass="calendarheader"></DayHeaderStyle>
<SelectedDayStyle CssClass="calendarselected"></SelectedDayStyle>
<TitleStyle CssClass="calendartitle"></TitleStyle>
</asp:Calendar>

 

[Scott M.]

Don't use CSS at all. Instead use the many many design-time properties that
a calendar control has for just this purpose:

Calendar.DayStyle.ForeColor = color.YourColor
Calendar.BackColor = Color.YourColor
etc.

 

[MattC]

My only problem with that is that i dont want to have to recompile my code
to change the background color of a calendar, let alone edit each of the
calendars one by one. I would rather upload a new master style sheet and
hey presto new website wide color schemes.

MattC

 

[Scott G.]

The reason you can't change the these two colors is that the Calendar control generates a style="" attribute for them that can't be overriden via a CSS class attribute.

There are a couple of ways around this; 1 create a derived Calendar class of your own to strip out these style attributes (in a overriden Render method); or 2. manually change the two that are getting in the way, view the HTML source and you'll see them, via the style properties of the Calendar control.

I am having trouble setting the color of the numbers in a calender control,
here's what i am using, also the background in title is silver as is the
selected day not matter what color I set the background-color to, I think
this si due to the fact taht the css is applyed to the Table and the
subsequest TD gets set to silver.

My CSS is simply at best how can i set the background-color and links color
of nested elements, I have tried things like:

table.calendartitle td{}, or .calendardays a, but I'm not sure of the
syntax.

.calendar
{
border-right:solid 1px #6699CC;
border-bottom:solid 1px #6699CC;
border-top:solid 1px #1b5086;
border-left:solid 1px #1b5086;
}

.calendartitle
{
font-size:14px;
color:WhiteSmoke;

FILTERrogidXImageTransform.Microsoft.Gradient(endColorstr='#1b5086',star
tColorstr='#4e82b9', gradientType='0');
BORDER-BOTTOM: #1b5086 1px solid;
BORDER-TOP: #6699CC 1px solid;
background-color: #4e82b9;
}

.calendarheader
{
font-weight:bold;
background-color: #1b5086;
color:WhiteSmoke;
border: solid 1px Whitesmoke;
}

.calendardays
{
background-color: #4e82b9;
color:WhiteSmoke;
border: solid 1px #1b5086;
}

.calendarselected
{
background-color: WhiteSmoke;
color: #4e82b9;
border: solid 1px #1b5086;
}

<asp:Calendar id="_dateselector" runat="server" CssClass="calendar"
DayNameFormat="Full">
<DayStyle CssClass="calendardays"></DayStyle>
<DayHeaderStyle CssClass="calendarheader"></DayHeaderStyle>
<SelectedDayStyle CssClass="calendarselected"></SelectedDayStyle>
<TitleStyle CssClass="calendartitle"></TitleStyle>
</asp:Calendar>