The following example shows how you can customize the DateChooser control in Flex by using an embedded font, customizing the header styles, week day names, week day name styles, and colors by setting various styles and properties.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">
<mx:Style>
@font-face { src: local("Base 02");
fontFamily: Base02Embedded; unicode-range: U+0030-U+0039,
/* 0-9 */ U+0041-U+0051, /* Uppercase A-Z */ U+0052-U+007A, /* Lowercase a-z */ U+002F-U+002F; /* slash (/) */
} DateChooser
{ cornerRadius: 0;
/* pixels */ header
Colors: black, black; borderColor: black; themeColor: black; fontFamily:
Base02Embedded; todayColor: red;
todayStyleName: myTodayStyleName; headerStyleName: myHeaderStyleName;
weekDayStyleName: myWeekDayStyleName; dropShadowEnabled: true;
}
.myTodayStyleName
{
color: white;
}
.myWeekDayStyleName { fontWeight: normal; }
.myHeaderStyleName { color: red; fontSize: 16; fontWeight: normal; }
</mx:Style>
<mx:Script>
<![CDATA[ import mx.formatters.DateBase; private function dateChooser_init():void
{ dateChooser.dayNames = DateBase.dayNamesShort; }
]]> </mx:Script>
<mx:DateChooser id="dateChooser" initialize="dateChooser_init();" />
</mx:Application> |
