Finer style sheet control of calendar

[Mark Griebling]

Hello,

I have been using the calendar controls for a few years and am now using this version.  One problem I have always had is the ability to style it the way I would like due to the calendar using the same style for different items.

For instance:
- Row and column headers use the same style.  If you want to underline your column headers, you also have to underline your row headers.
- Months in MultiView mode cannot be seperated with padding without also causing the heading to be separated as well as adding padding other places. 

Many other controls in the suite have much finer stylesheet control.  When is this scheduled to be addressed in RadCalendar?

Regards,
Mark

[Dimo]

Hi Mark,

Thank you for your feedback. We are currently working on a new HTML rendering and new CSS class structure for RadCalendar, which should make skinning and tweaking the control's appearance easier. We plan to introduce the new rendering for Q2 2008.

As for now, here are a couple of suggestions on the things you mentioned:


1) Row and column headers indeed have the same CSS classes, however, they are different HTML elements - column headers (week days) are <th> elements, while row headers (week numbers) are <td> elements. You can use different CSS selectors to target the two types of headers:

.DaysOfWeek_Default
{
      /* styles for both column and row headers*/
}

th.DaysOfWeek_Default
{
     /*styles for column headers*/
}

td.DaysOfWeek_Default
{
     /*styles for row headers*/
}


2) In order to add some whitespace between the multiple Calendars in Multi-Month View, you can use:

.TableLayout_SKIN  td  .TableLayout_SKIN
{
    margin: 5px;
}

Another technique to separate the month views is by using borders. It is described here:

RadCalendar Multi-View Mode


Hope this helps. Let us know if you need additional information.


Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Mark Griebling]

Dimo,

Thanks for the suggestions.  I look forward to the new rendering.

The table spacing didin't work quite as I would like.  Instead I used this to add a border to the left of the second and third months.

table#rCal_Top_1,
table#rCal_Top_2
{
    border-left: solid 1px #dde1e4 !important;
}

Thanks,
Mark