How to change Calendar Day link style to button style

4 posts, 1 answers
  1. Joseph Hua
    Joseph Hua avatar
    10 posts
    Member since:
    Apr 2010

    Posted 18 Jun 2010 Link to this post

    On the RadDatePicker's calendar, the days are links which I want to change them to buttons (or just numbers without underline) so the calendar may look better.  Also, the navigation next and previous are links which I want to change to labers or just letters. Can somebody help?
  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 23 Jun 2010 Link to this post

    Hi Joseph,

    In the default case, both the dates and the Prev/Next navigations are buttons. So there must be something that changes the normal look of the Calendar. Are you applying a custom skin to the control or editing its style in any way different from using our built-in skins?

    Greetings,
    Tsvetina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Joseph Hua
    Joseph Hua avatar
    10 posts
    Member since:
    Apr 2010

    Posted 23 Jun 2010 Link to this post

    I have my date picker configured like this:

    <

     

    telerik:RadDatePicker ID="calDate" Runat="server" AutoPostBack="True" Width="95px" Skin="" EnableEmbeddedBaseStylesheet="false"

     

     

    Culture="English (United States)" >

     

     

    <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False"

     

     

    ViewSelectorText="x" ShowRowHeaders="false" BorderStyle="Solid" NavigationPrevText="&lt; Prev" NavigationNextText="Next &gt;" NavigationCellPadding="0" NavigationCellSpacing="3"

     

     

    BorderWidth="0px" BorderColor="#573d08" CalendarTableStyle-BackColor="Control" FastNavigationStyle-BackColor="White" HeaderStyle-BackColor="#23476d" HeaderStyle-ForeColor="#ccffff"

     

     

    TitleStyle-BackColor="#333333" TitleStyle-HorizontalAlign="Center" TitleStyle-ForeColor="White" SelectedDayStyle-BackColor="Orange" SelectedDayStyle-BorderStyle="Solid" SelectedDayStyle-BorderWidth="1px" SelectedDayStyle-BorderColor="#cccccc" DayStyle-BorderColor="#cccccc" DayStyle-BorderStyle="Solid" DayStyle-BorderWidth="1px" DayNameFormat="FirstTwoLetters" DayStyle-BackColor="White" DayStyle-Width="13px" DayStyle-ForeColor="#333333"

     

     

    WeekendDayStyle-Width="13px" Width="130px" Height="100px" ShowOtherMonthsDays="false" SingleViewRows="5" CssClass="formInput" FastNavigationStep="2" FastNavigationNextText="" FastNavigationPrevText="" >

     

     

    <ClientEvents OnLoad="calendarLoad" />

     

     

    </Calendar>

     

     

    <DatePopupButton ImageUrl="res/btn_calsm.png" HoverImageUrl="res/btn_calsm.png" ToolTip=""></DatePopupButton>

     

     

    <DateInput DisplayDateFormat="M/d/yyyy" DateFormat="M/d/yyyy" AutoPostBack="True"></DateInput>

     

     

    </telerik:RadDatePicker>

     

    <

     

    script language="javascript" type="text/javascript">

     

        function calendarLoad(sender, args) {

     

        $telerik.$(

    ".rcNext").removeClass("rcNext");

     

        $telerik.$(

    ".rcPrev").removeClass("rcPrev");

     

        }

     

    </script>

     

     

    <style type="text/css">

        .rcTitlebar,

        .rcMain

        {

            padding:0;

        }

     

     

    </style>

     


    Now the only things I don't like about the calender is the link style on the previous and next navigation, and on the days.

    Thanks for your help!

    Joseph

  4. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 28 Jun 2010 Link to this post

    Hello Joseph,

    I would recommend that in this situation you use the Visual Style Builder tool in order to create your own skin for RadCalendar. You can, for example, pick the closest looking one of our built-in skins and edit it, until you achieve the desired style.  Here is a link to a help topic on how to do this.

    All the best,
    Tsvetina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top