Applying CSS to Calendar

Discussion in 'ASP .Net Web Controls' started by MattC, Aug 11, 2004.

  1. MattC

    MattC Guest

    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;

    FILTER:progid:DXImageTransform.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>
    MattC, Aug 11, 2004
    #1
    1. Advertising

  2. MattC

    Scott M. Guest

    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" <> wrote in message
    news:...
    > 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;
    >
    >

    FILTER:progid:DXImageTransform.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., Aug 11, 2004
    #2
    1. Advertising

  3. MattC

    MattC Guest

    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 M." <> wrote in message
    news:...

    > 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" <> wrote in message
    > news:...
    > > 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;
    > >
    > >

    >

    FILTER:progid:DXImageTransform.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>
    > >
    > >

    >
    >
    MattC, Aug 11, 2004
    #3
  4. MattC

    Scott G. Guest

    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.

    "MattC" <> wrote in message news:...
    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;

    FILTER:progid:DXImageTransform.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 G., Aug 11, 2004
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Prakash
    Replies:
    6
    Views:
    5,015
    Prakash
    Nov 9, 2005
  2. Von Shean

    Applying Css on input button

    Von Shean, May 28, 2004, in forum: HTML
    Replies:
    4
    Views:
    101,465
    shlover143
    Jun 22, 2010
  3. Noozer
    Replies:
    2
    Views:
    6,401
    Noozer
    Sep 26, 2004
  4. =?Utf-8?B?TmVpbCBTdGV2ZW50b24=?=

    Applying CSS Styles to Dropdownlist

    =?Utf-8?B?TmVpbCBTdGV2ZW50b24=?=, May 15, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    60,960
    Juan T. Llibre
    May 15, 2006
  5. Replies:
    1
    Views:
    456
    Andrew Thompson
    Aug 13, 2006
Loading...

Share This Page