This is a migrated thread and some comments may be shown as answers.

How to change Calendar Day link style to button style

3 Answers 68 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Joseph Hua
Top achievements
Rank 1
Joseph Hua asked on 18 Jun 2010, 02:06 PM
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?

3 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 23 Jun 2010, 01:11 PM
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
0
Joseph Hua
Top achievements
Rank 1
answered on 23 Jun 2010, 03:35 PM
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

0
Accepted
Tsvetina
Telerik team
answered on 28 Jun 2010, 05:14 PM
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
Tags
Calendar
Asked by
Joseph Hua
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Joseph Hua
Top achievements
Rank 1
Share this question
or