RadCalendar Looks

5 posts, 0 answers
  1. Brown
    Brown avatar
    48 posts
    Member since:
    Dec 2010

    Posted 14 Jan 2011 Link to this post

    Hi
     I am using RadCalendar in my page... But my calendar is not looking pretty good....like the demo one....i need to display my calendar should be like that.. i am using the same CSS .
  2. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 18 Jan 2011 Link to this post

    Hello Brown,

    I am afraid that without being able to reproduce the problem locally, we cannot help much. Can you please open a support ticket and send us a small sample project where the problem can be reproduced? We will check it right away and do our best to help.

    Kind regards,
    Pavlina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. Brown
    Brown avatar
    48 posts
    Member since:
    Dec 2010

    Posted 18 Jan 2011 Link to this post

    hi,

     My CSS:


     

    table.RadCalendar_Special

    {

     

     

    border-collapse:separate;

     

     

     

    border:0;

     

     

     

    background:#272727;

     

     

     

    color:#fff;

     

     

     

    font:12px "segoe ui",arial,sans-serif;

     

     

     

    width:550px;

     

    }

    /*titlebar*/

    .RadCalendar_Special

     

     

    .rcTitlebar

     

    {

     

     

    width:100%;

     

     

     

    border:0;

     

     

     

    padding:0;

     

     

     

    background:0 0 no-repeat url(rcTitlebar.gif);

     

    }

    .RadCalendar_Special

     

     

    .rcTitlebar table

     

    {

     

     

    width:100%;

     

     

     

    border-collapse:separate;

     

     

     

    border:0;

     

     

     

    font:14px/36px "segoe ui",arial,sans-serif;

     

    }

    .RadCalendar_Special

     

     

    .rcTitlebar td

     

    {

     

     

    border:0;

     

     

     

    padding:0;

     

     

     

    text-align:center;

     

     

     

    vertical-align:middle;

     

    }

    .RadCalendar_Special

     

     

    .rcTitlebar .rcTitle

     

    {

     

     

    width:100%;

     

     

     

    cursor:default;

     

    }

    .RadCalendar_Special

     

     

    .rcTitlebar .rcPrev,

     

    .RadCalendar_Special

     

     

    .rcTitlebar .rcNext,

     

    .RadCalendar_Special

     

     

    .rcTitlebar .rcFastPrev,

     

    .RadCalendar_Special

     

     

    .rcTitlebar .rcFastNext

     

    {

     

     

    display:block;

     

     

     

    width:17px;

     

     

     

    height:16px;

     

     

     

    margin:0 6px;

     

     

     

    background:transparent url(specialsprite.gif) no-repeat;

     

     

     

    text-indent:-2222px;

     

     

     

    text-decoration:none;

     

     

     

    color:#ccc;

     

     

     

    overflow:hidden;

     

    }

    .RadCalendar_Special

     

     

    .rcTitlebar .rcFastPrev

     

    {

     

     

    background-position:0 0;

     

    }

    .RadCalendar_Special

     

     

    .rcTitlebar .rcFastPrev:hover

     

    {

     

     

    background-position:0 -50px;

     

    }

    .RadCalendar_Special

     

     

    .rcTitlebar .rcPrev

     

    {

     

     

    background-position:0 -100px;

     

    }

    .RadCalendar_Special

     

     

    .rcTitlebar .rcPrev:hover

     

    {

     

     

    background-position:0 -150px;

     

    }

    .RadCalendar_Special

     

     

    .rcTitlebar .rcNext

     

    {

     

     

    background-position:0 -200px;

     

    }

    .RadCalendar_Special

     

     

    .rcTitlebar .rcNext:hover

     

    {

     

     

    background-position:0 -250px;

     

    }

    .RadCalendar_Special

     

     

    .rcTitlebar .rcFastNext

     

    {

     

     

    background-position:0 -300px;

     

    }

    .RadCalendar_Special

     

     

    .rcTitlebar .rcFastNext:hover

     

    {

     

     

    background-position:0 -350px;

     

    }

    .RadCalendar_Special

     

     

    .rcMain

     

    {

     

     

    width:100%;

     

     

     

    border:0;

     

     

     

    padding:0;

     

    }

    .RadCalendar_Special

     

     

    .rcMainTable

     

    {

     

     

    border-collapse:separate;

     

     

     

    border:0;

     

     

     

    width:100%;

     

     

     

    font:12px/17px "segoe ui",arial,sans-serif;

     

    }

    /*header, footer*/

    .RadCalendar_Special

     

     

    .rcHeader,

     

    .RadCalendar_Special

     

     

    .rcFooter

     

    {

     

     

    border:0;

     

     

     

    padding:0;

     

    }

    /*week numbers and days*/

    .RadCalendar_Special

     

     

    .rcWeek th,

     

    .RadCalendar_Special

     

     

    .rcRow th

     

    {

     

     

    border:0;

     

     

     

    font-weight:normal;

     

     

     

    vertical-align:middle;

     

     

     

    cursor:default;

     

     

     

    color:#c8c8c8;

     

    }

    .RadCalendar_Special

     

     

    .rcWeek th

     

    {

     

     

    line-height:28px;

     

     

     

    padding-bottom:7px;

     

     

     

    background:0 -600px repeat-x url(specialsprite.gif);

     

    }

    /*date cells*/

    .RadCalendar_Special

     

     

    .rcRow td

     

    {

     

     

    padding:0 3px 3px 0;

     

     

     

    text-align:right;

     

    }

    .RadCalendar_Special

     

     

    .rcRow .rcOtherMonth

     

    {

     

     

    background:none;

     

     

     

    font:1px/1px sans-serif;

     

    }

    .RadCalendar_Special

     

     

    .rcRow a,

     

    .RadCalendar_Special

     

     

    .rcRow span,

     

    .RadCalendar_Special

     

     

    .rcTemplate

     

    {

     

     

    display:block;

     

     

     

    width:60px;

     

     

     

    height:47px;

     

     

     

    padding:8px 8px 0 0;

     

     

     

    background:0 -400px no-repeat url(specialsprite.gif);

     

     

     

    text-decoration:none;

     

    }

    .RadCalendar_Special

     

     

    .rcTemplate

     

    {

     

     

    background:none;

     

     

     

    color:#f90;

     

    }

    .RadCalendar_Special

     

     

    .rcRow a

     

    {

     

     

    color:#fff;

     

    }

    .RadCalendar_Special

     

     

    .rcRow .rcHover a,

     

    .RadCalendar_Special

     

     

    .rcRow .rcSelected a

     

    {

     

     

    background-position:0 -500px;

     

     

     

    color:#000;

     

    }

    /*special days*/

    .RadCalendar_Special

     

     

    .rcRow .rcHover .rcTemplate,

     

    .RadCalendar_Special

     

     

    .rcRow .rcSelected .rcTemplate

     

    {

     

     

    color:#fc0;

     

    }

    .RadCalendar_Special

     

     

    .rcRow .rcDayDate

     

    {

     

     

    background:0 0 no-repeat url(t_date.gif);

     

    }

    .RadCalendar_Special

     

     

    .rcRow .rcDayMortgage

     

    {

     

     

    background:0 0 no-repeat url(t_mortgage.gif);

     

    }

    .RadCalendar_Special

     

     

    .rcRow .rcDayBirthday

     

    {

     

     

    background:0 0 no-repeat url(t_birthday.gif);

     

    }





    my calendar.aspx


     

     

    <telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="true" Skin="Special"

     

     

     

    EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" EnableMonthYearFastNavigation="false" DayNameFormat="Short"

     

     

     

    ShowRowHeaders="false" ShowOtherMonthsDays="false">

     

     

     

    <ClientEvents OnDateClick="OnDateClick" />

     

     

    </telerik:RadCalendar>
  4. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 24 Jan 2011 Link to this post

    Hello Brown,

    Attached to this message is a simple working project where the RadCalendar control looks as you expected. Check it out and let me know if other questions arise. 

    Regards,
    Pavlina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  5. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 24 Jan 2011 Link to this post

    Hello Brown,

    Attached to this message is a simple working project where the RadCalendar control looks as you expected. Check it out and let me know if other questions arise. 

    Regards,
    Pavlina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top