[Flex] Calendar

Introduction:

Creating a calendar in Flex is just as easy as in Qt.

Create a Flex Project for Calendar:

Click "File->New->Flex Project" to create a empty flex project.
In Design mode, drag a DateChooser and a TextInput component on your design area. and given the corresponding name and configuration to each instance.

Coding:

In this example, we just implement a very simple feature. Displaying the date information on textinput when user choose a day. Below is the whole source code for this example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xCCCCCC" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#8B97AC, #BDC3CF]" width="215" height="280">
<mx:Script>
<![CDATA[
private function onDateSelected():void{
var date:Date;
date = dateChooser.selectedDate;
dateOut.text = date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
}
]]>
</mx:Script>
<mx:VBox left="10" top="10" bottom="10" right="10">
<mx:Panel width="100%" height="221" layout="absolute" title="Calendar">
<mx:DateChooser id="dateChooser" x="0" y="0" textAlign="center" change="onDateSelected()" width="100%" height="100%"/>
</mx:Panel>
<mx:ApplicationControlBar width="100%" height="100%">
<mx:TextInput id="dateOut" width="100%"/>
</mx:ApplicationControlBar>
</mx:VBox>
</mx:Application>


Compile and Run:

Click "Run" to compile and run your project.



Conclusion:

Generally, people use DataChooser component for the online reservation application. Thus, user just need to choose a day instead of typing it themselves.