Finer style sheet control of calendar

3 posts, 0 answers
  1. Mark Griebling
    Mark  Griebling avatar
    129 posts
    Member since:
    Dec 2005

    Posted 17 Apr 2008 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 18 Apr 2008 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark Griebling
    Mark  Griebling avatar
    129 posts
    Member since:
    Dec 2005

    Posted 18 Apr 2008 Link to this post

    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-leftsolid 1px #dde1e4 !important;  
    }  

    Thanks,
    Mark
Back to Top