How to change Calendar Day link style to button style

[Joseph Hua]

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?

[Tsvetina]

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

[Joseph Hua]

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

[Tsvetina]

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