SitePoint Sponsor |
|
User Tag List
Results 1 to 11 of 11
Thread: Setting calendar title color
-
Oct 7, 2003, 07:37 #1
- Join Date
- Mar 2000
- Location
- Muskegon, MI
- Posts
- 2,328
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Oct 7, 2003, 08:17 #2
what you will do is select the nextPrev style to blue and the title style font to white.
-
Oct 7, 2003, 10:24 #3
- 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; }
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; }
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>
-
Oct 7, 2003, 12:02 #4
- 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; }
-
Oct 7, 2003, 12:19 #5
- 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.
-
Oct 7, 2003, 12:55 #6
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.
-
Oct 7, 2003, 14:30 #7
- 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; }
Code:.calendar table td a { color: red !important; }
-
Oct 7, 2003, 14:35 #8
- Join Date
- Jan 2001
- Location
- Milton Keynes, UK
- Posts
- 1,011
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Oct 7, 2003, 14:50 #9
- 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.
-
Jul 24, 2007, 18:41 #10
- Join Date
- Jul 2007
- Posts
- 1
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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!
-
Aug 1, 2007, 18:02 #11
- 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