Setting calendar title color

[westmich]

Can't quite figure out which attribute this is within the calendar web control. I'd like to make the text white where I have it highlighted in green in the attachment.

Thanks

[ses5909]

what you will do is select the nextPrev style to blue and the title style font to white.

[shane]

I don't think the title style property gets applied. I haven't tested it in .Net v1.1 but this was the case with .Net v1. You can get around this though by using a css selector. As the top bar is in a separate table you can use something like:

.calendar table td {
	color: #ffffff;
}

Below is the complete calendar css that we've used on our intranet. Note, we had to use a liberal use of '!important' to override the defaults.

/* ASP.Net specific */
/***********************************************/
/* UI.WebControls.Calendar control styles */
/***********************************************/
.calendar {
	border-width: 1px !important;
	border-style: solid !important;
	border-color: #333333 !important;
	border-collapse: collapse !important;
	background-color: #06275C !important;
	width: 180px;
}

/* Header table. Contains month year and next/prev month links */
.calendar table td {
	background-color: #000066;
	border-color: #06275C;
	border-width: 1px;
	border-style: solid;
	color: #ffffff;
	font-weight: bold;
	font-size: 10px;
	padding: 0px;
}

.calendar table td a:link, 
.calendar table td a:active,
.calendar table td a:visited {
	color: #ffcc00 !important;
	font-size: 9px !important;
	text-decoration: none;
}

.calendar table td a:hover {
	color: #ffffff !important;
	font-size: 9px !important;
	text-decoration: none;
}

.calendar td {
	font-family: Tahoma, Verdana;
	font-size: 9px;
	font-weight: bold;
	background-color: #06275C !important;
	padding: 2px;
}

.calendar .Selector {
	
}

.calendar .OtherMonthDay a {
	color: #999999 !important;
}

.calendar .SelectedDay a {
	font-weight: bold;
	color: #333333 !important;
}


/* Note:  Calendar.TitleStyle doesn't work in current versions of ASP.Net */
.calendar .Title {
	background-color: #06275C;
	border-color: Black;
	border-width: 1px;
	border-style: solid;
}

.calendar .NextPrev a:link,
.calendar .NextPrev a:active,
.calendar .NextPrev a:visited  {
	color: #ffcc00;
	font-size: 9px;
	font-weight: bold;
	font-family: Tahoma, Verdana;
	text-decoration: none;
	
}

.calendar .NextPrev a:hover {
	color: #ffffff;
	font-size: 9px;
	font-weight: bold;
	font-family: Tahoma, Verdana;
	text-decoration: none;
}

.calendar .Selector {
	
}


.calendar .DayHeader {
	text-align: center;
	background-color: #eeeeee !important;
}

.calendar .Day {
	text-align: center;
	background-color: #eeeeee !important;
}

.calendar .WeekendDay {
	text-align: center;
	background-color: #eeeeee !important;
}

.calendar .OtherMonthDay {
	text-align: center;
	background-color: #eeeeee !important;
}

.calendar .TodayDay {
	text-align: center;
	background-color: #eeeeee !important;
}

.calendar .SelectedDay {
	font-family: Tahoma, Verdana;
	font-size: 9px;
	text-align: center !important;
	background-color: #cccccc !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-color: #333333 !important;
}

.calendar .Day a:link,
.calendar .Day a:active,
.calendar .Day a:visited,
.calendar .Today a:link,
.calendar .Today a:active,
.calendar .Today a:visited,
.calendar .WeekendDay a:link,
.calendar .WeekendDay a:active,
.calendar .WeekendDay a:visited {
	font-family: Verdana;
	font-size: 9px;
	color: #333333 !important;
	text-decoration: none;
}

.calendar .OtherMonthDay a:link,
.calendar .OtherMonthDay a:active,
.calendar .OtherMonthDay a:visited, {
	font-family: Verdana;
	font-size: 9px;
	color: #999999 !important;
	text-decoration: none;
}



.calendar .Day a:hover,
.calendar .WeekendDay a:hover,
.calendar .OtherMonthDay a:hover {
	font-family: Verdana;
	font-size: 9px;
	color: #cc3300 !important;
	text-decoration: none;
}

.calendar .SelectedDay a:link,
.calendar .SelectedDay a:active,
.calendar .SelectedDay a:visited {
	font-family: Verdana;
	font-size: 9px;
	color: #333333 !important;
	text-decoration: none;
}

.calendar .SelectedDay a:hover {
	font-family: Verdana;
	font-size: 9px;
	color: #cc3300 !important;
	text-decoration: none;
}

ASPX:

<asp:calendar
	id="calDate"
	cssclass="calendar"
	selectionmode="Day"
	runat="server"
	visible="False"
	nextprevformat="ShortMonth"
	onselectionchanged="Calendar_SelectionChanged"
	dayheaderstyle-cssclass="DayHeader"
	daystyle-cssclass="Day"
	nextprevstyle-cssclass="NextPrev"
	othermonthdaystyle-cssclass="OtherMonthDay"
	selecteddaystyle-cssclass="SelectedDay"
	selectorstyle-cssclass="Selector"
	titlestyle-cssclass="Title"
	todaydaystyle-cssclass="TodayDay"
	weekenddaystyle-cssclass="WeekendDay">
</asp:calendar>

[westmich]

Thanks for pointing that out Shane. I'm not sure on the multiple CSS names, but I tried it and it did not work.

<asp:calendar cssclass="Calendar" ...
 
.Calendar .Title {
 TitleStyle-ForeColor: #FFFFFF;
}

[jeffyjones]

The current version of the calendar control doesn't apply style classes correctly to the header, including the next/previous links. You can explicitly tell them to be a certain color using the control's properties, but not by style sheets. The problem in part is that the style is applied to the row in the rendered HTML, and not the specific text or links.

[ses5909]

i was able to set the calendar's style as Jeff mentioned by setting the calendar control's TitleStyle. I use it in my current program.

[shane]

Like I said, it can be done through a style sheet but not using style class for the title. Because the heading (ie next/prev links and the month) is within a table within the outer calendar table you can use the following css.

.calendar table td {
	color: #ffffff;
}

You can also use the same technique to set the styles of the links in heading.

.calendar table td a {
	color: red !important;
}

You could do as Jeff and ses5059 said but this does result in the styles hard coded in the control rather than in a style sheet. If you want to go this route you might want to create your own calendar user control, inheriting from the the WebControls.Calendar. Doing this you can hardcode the colours in the control and just re-use the control throughout a project, which has the benfefit of the colours being harded in just one place.

[shane]

Info on CSS Selectors

[jeffyjones]

Shane: I see what you're saying, but the problem is that the control does not render the class attributes in the right elements to get it to work right.

[Gruntos]

If you put this on the td or div that contains the calendar:

<td id="cal">
or
<div id="cal">

and add this class into your stylesheet:

#cal table tr td {
	color: #FFFFFF;
}

You should be right to go!

[vb_vs]

you may use the third party control

use google to search "asp.net calender control"