Friday, January 1, 2010

Flex examples - Calendar ( datachooser) border thickness and color assigning

Using dateChooser now we are going to create a calendar and we are going to set the color for the border of the calendar and we are going to give thickness for the calendar.

Here slider is used to increase the thickness for the calendar's border and colorpicker is used for choosing the color for the calendar's border.

Here is the code,


<mx:application mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" layout="vertical" verticalalign="middle" backgroundcolor="white">
<mx:applicationcontrolbar dock="true" paddingtop="100" paddingbottom="100">
<mx:hbox width="100%" height="100%" horizontalalign="center" paddingtop="10" paddingbottom="10" paddingleft="10" paddingright="10" borderthickness="5" bordercolor="black" borderstyle="solid">
<mx:form stylename="plain">
<mx:formitem label="Change the color:">

</mx:colorpicker>
<mx:formitem label="Change the border Thickness:">
<mx:hslider id="borderController" minimum="1" maximum="5" value="1" snapinterval="1" tickinterval="1" livedragging="true">
</mx:hslider>
</mx:formitem>
<mx:spacer width="50">
<mx:datechooser bordercolor="{borderColor.selectedColor}" borderthickness="{borderController.value}">
</mx:datechooser>
</mx:spacer>
</mx:formitem>
</mx:form>
</mx:hbox>
</mx:applicationcontrolbar>
</mx:application>


See the demo


Flex Examples - Calendar ( Datachooser) Border Thickness and Color Assigning