Font Color of the Calendar

[Cloud]

Hi all,

  I want to set the font color to red when the date is holiday. The skin i am using is Outlook. But when I set the Forecolor of a SpecialDay to red, it is still showing black to me. Anyone can help. Thx so much.

[Dimo]

Hello Cloud,

The color is set to the Calendar table cell, but the hypelink inside that cell does not inherit this color style (browser behavior).

Please set a custom CSS class to the table cell and then use the following CSS rule:


.RadCalendar_Outlook  td.MyCustomCellClass  a
{
     color: red;
}


Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Cloud]

Hi Dimo

  I can't make it work, could you please provide me some sample code?
  Thx.

Regards,
Cloud

[Dimo]

Hi Cloud,

Sorry, I have provided a CSS selector, which will work with Q3 2008 Beta, while you can be using an older version.

Please try this:

ASPX

<telerik:RadCalendar ID="RadCalendar1" runat="server" Skin="Outlook">
    <SpecialDays>
        <telerik:RadCalendarDay Date="2008/11/04" ItemStyle-CssClass="MyClass" />
    </SpecialDays>
</telerik:RadCalendar>


CSS

.calendarWrapper_Outlook  .MyClass  a
{
   color: red;
}


However, if you upgrade to Q3 2008, you will need to use the CSS selector provided in my earlier message.


Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Shinu]

Hi Cloud,

You can try the following code snippet to assign the css class to the desired date in the code behind.

CSS

<style type="text/css" >
     .CustomClass a
     {
      color:Red !Important;
     }
</style>

C#

protected void RadCalendar1_DayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
    {
        if (e.Day.Date == Convert.ToDateTime("11/04/2008 12:00:00 AM"))
        {
            e.Cell.CssClass = "CustomClass";
        }
    }

Thanks,
Shinu.

[Cloud]

Hi all,

  I get it works finally. The Important keyword plays the trick.
Thank you so much.

Regards,
Cloud

[Princy]

Hi Cloud,

Adding to the above post, since the skin definitions will override any additional css classes for the calendar, you will need to put an !important keyword to the calendar styles in order to take precedence over the calendar rendering. Thus the corresponding appearance setting will dominate over the style specified in the Styles.css file of the chosen skin.

Thanks,
Princy.