SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Setting calendar title color

    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
    Attached Images Attached Images
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  2. #2
    _ silver trophy ses5909's Avatar
    Join Date
    Jul 2003
    Location
    NoVa
    Posts
    5,467
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    what you will do is select the nextPrev style to blue and the title style font to white.

  3. #3
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    .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.

    Code:
    /* 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:
    Code:
    <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>
    Attached Images Attached Images

  4. #4
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for pointing that out Shane. I'm not sure on the multiple CSS names, but I tried it and it did not work.
    Code:
    <asp:calendar cssclass="Calendar" ...
     
    .Calendar .Title {
     TitleStyle-ForeColor: #FFFFFF;
    }
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  5. #5
    SitePoint Wizard silver trophy
    Join Date
    Sep 2002
    Location
    Cleveland, Ohio, USA
    Posts
    1,494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    _ silver trophy ses5909's Avatar
    Join Date
    Jul 2003
    Location
    NoVa
    Posts
    5,467
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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.

  7. #7
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    .calendar table td {
    	color: #ffffff;
    }
    You can also use the same technique to set the styles of the links in heading.

    Code:
    .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.

  8. #8
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  9. #9
    SitePoint Wizard silver trophy
    Join Date
    Sep 2002
    Location
    Cleveland, Ohio, USA
    Posts
    1,494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post This works!

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

    Code HTML4Strict:
    <td id="cal">
    or
    <div id="cal">

    and add this class into your stylesheet:

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

    You should be right to go!

  11. #11
    SitePoint Zealot vb_vs's Avatar
    Join Date
    Sep 2006
    Location
    Melbourne
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you may use the third party control

    use google to search "asp.net calender control"
    a software developer


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •