How do I change the left/right arrow button styles for a DateChooser in flex

Question

My DateChooser code and its style code is shown below:

<mx:DateChooser id="dc" cornerRadius="0" bottom="0" width="100%" allowMultipleSelection="true" 
                        allowDisjointSelection="false" styleName="dateChooserGradient" 
                        change="fetchDateAgenda(dc.selectedDate)"
                        />

and the dateChooserGradient:

.dateChooserGradient
{
    header-colors: #133c59, #29506c;        
    todayStyleName: myTodayStyleName;
    headerStyleName: myHeaderStyleName;
    weekDayStyleName: myWeekDayStyleName;
    dropShadowEnabled: false;
    arrowBorderThickness:2;
    arrowColor: #062338;
    arrowAlpha: 0.1;
}

What I actually want for my arrows is a transparent background, with borderthickness to be 2, and the arrows and bordercolor to be #062338. Also if I can make the width and height of the arrow itself a bit bigger then what it is as default.

Thanks and regards ~Z~

Answer 1

There are several styles for "skins" that use PNGs. For example, next month button is "nextMonthUpSkin" and "nextMonthDownSkin" etc. For these properties in CSS you just supply a PNG file.

Here is an example from FlexCoders: http://blog.flexexamples.com/2007/12/16/changing-the-next-and-previous-month-navigation-icons-on-a-datefield-control-in-flex/