Click here to Skip to main content
13,863,642 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


8 bookmarked
Posted 21 Aug 2011
Licenced CPOL

Flex Calendar

, 22 Aug 2011
Rate this:
Please Sign up or sign in to vote.
This is a Calendar application developed using Flex
Sample Image - maximum width is 600 pixels


This article demonstrates the use of Flex to create a Calendar application. Flex technology can be used to develop Flex applications run on the browser using Flash Player runtime environment for executing client code, rendering graphics.
The Flex programming model includes the Flex class library, MXML, ActionScript, a compiler and a debugger as shown below:

Flex Class Library

Flex applications are written using a combination of MXML and ActionScript. MXML can be used to create the user interface:


The code I have written is used to display an interactive monthly calendar. The month and year can be selected from the respective combo boxes and the calendar for the selected month and year will be displayed. In addition, the current time is displayed in the hh:mm:ss format.

Using the Code

A flex program is basically structured as an XML file. The first line of the program is the processing instruction specifying the xml version.

<?xml version="1.0"?>

The root element of the flex application is the <mx:Application> tag, which represents the application container. The container contains components. The <mx:Application> tag has an attribute called xmlns:mx which specifies the namespace to be included.
The creationComplete attribute specifies the method to be invoked after the application starts.

<mx:Application xmlns:mx="" creationComplete="setYears()">
The user interface of the calendar is created using Panel, Button and ComboBox controls. The first panel is for choosing the color. This panel defines buttons to change the color of the other panels by moving mouse pointer over the button. It uses the mouseOver event of the buttons to call the changecolor() function.
<mx:Panel id="colorcontainerpanel" 

		<mx:Panel id="blackpanel" layout="absolute" 

		backgroundColor="black" x="0" y="0">
			<mx:Button id="blackbutton" x="0" y="0" 

			mouseOver="changecolor(1)" />
		<mx:Panel id="whiletpanel" layout="absolute" 

		backgroundColor="white" x="50" y="0">
			<mx:Button id="whitebutton" x="0" y="0" 

			mouseOver="changecolor(2)" />
		<mx:Panel id="redpanel" layout="absolute" 

		backgroundColor="red" x="100" y="0">
			<mx:Button id="redbutton" x="0" y="0" 

			mouseOver="changecolor(3)" />
		<mx:Panel id="greenpanel" layout="absolute" 

		backgroundColor="green" x="150" y="0">
			<mx:Button id="greenbutton" x="0" y="0" 

			mouseOver="changecolor(4)" />
		<mx:Panel id="bluepanel" layout="absolute" 

		backgroundColor="blue" x="200" y="0">
			<mx:Button id="bluebutton" x="0" y="0" 

			mouseOver="changecolor(5)" />
		<mx:Panel id="yellowpanel" layout="absolute" 

		backgroundColor="yellow" x="250" y="0">
			<mx:Button id="yellowbutton" x="0" y="0" 

			mouseOver="changecolor(6)" />
		<mx:Panel id="cyanpanel" layout="absolute" 

		backgroundColor="cyan" x="300" y="0">
			<mx:Button id="cyanbutton" x="0" y="0" 

			mouseOver="changecolor(7)" />
		<mx:Panel id="magentapanel" layout="absolute" 

		backgroundColor="magenta" x="350" y="0">
			<mx:Button id="magentabutton" x="0" y="0" 

			mouseOver="changecolor(8)" />

The second panel contains two ComboBox controls to allow the user to select the month and year and a button control on which the current time is displayed. The show() function is called when a month or year is selected from the CombBox controls.

<mx:Panel id="selectionpanel" layout="absolute">
	<mx:ComboBox id="monthlist" x="0" y="0" dataProvider="{Months}" 

	change="show()" toolTip="Select month...">
	<mx:ComboBox id="yearlist" x="107" y="0" width="75" 

	dataProvider="{Years}" change="show()" toolTip="Select year...">
	<mx:Button id="timerbutton" x="182" y="0" width="75" color="green" />

The third panel is the main panel which defines a collection of buttons arranged in seven rows and seven columns. The first column represents the first day of the week, i.e., Sunday.

<mx:Panel id="datepanel" layout="absolute">
	<mx:Button x="0" y="0" label="Sun" width="60" color="red" />
	<mx:Button x="60" y="0" label="Mon" width="60" color="blue" />
	<mx:Button x="120" y="0" label="Tue" width="60" color="blue" />
	<mx:Button x="180" y="0" label="Wed" width="60" color="blue" />
	<mx:Button x="240" y="0" label="Thu" width="60" color="blue" />
	<mx:Button x="300" y="0" label="Fri" width="60" color="blue" />
	<mx:Button x="360" y="0" label="Sat" width="60" color="blue" />

	<mx:Button x="0" y="20" width="60" color="red" />
	<mx:Button x="60" y="20" width="60" color="blue" />
	<mx:Button x="120" y="20" width="60" color="blue" />
	<mx:Button x="180" y="20" width="60" color="blue" />
	<mx:Button x="240" y="20" width="60" color="blue" />
	<mx:Button x="300" y="20" width="60" color="blue" />
	<mx:Button x="360" y="20" width="60" color="blue" />

	<mx:Button x="0" y="40" width="60" color="red" />
	<mx:Button x="60" y="40" width="60" color="blue" />
	<mx:Button x="120" y="40" width="60" color="blue" />
	<mx:Button x="180" y="40" width="60" color="blue" />
	<mx:Button x="240" y="40" width="60" color="blue" />
	<mx:Button x="300" y="40" width="60" color="blue" />
	<mx:Button x="360" y="40" width="60" color="blue" />

	<mx:Button x="0" y="60" width="60" color="red" />
	<mx:Button x="60" y="60" width="60" color="blue" />
	<mx:Button x="120" y="60" width="60" color="blue" />
	<mx:Button x="180" y="60" width="60" color="blue" />
	<mx:Button x="240" y="60" width="60" color="blue" />
	<mx:Button x="300" y="60" width="60" color="blue" />
	<mx:Button x="360" y="60" width="60" color="blue" />

	<mx:Button x="0" y="80" width="60" color="red" />
	<mx:Button x="60" y="80" width="60" color="blue" />
	<mx:Button x="120" y="80" width="60" color="blue" />
	<mx:Button x="180" y="80" width="60" color="blue" />
	<mx:Button x="240" y="80" width="60" color="blue" />
	<mx:Button x="300" y="80" width="60" color="blue" />
	<mx:Button x="360" y="80" width="60" color="blue" />

	<mx:Button x="0" y="100" width="60" color="red" />
	<mx:Button x="60" y="100" width="60" color="blue" />
	<mx:Button x="120" y="100" width="60" color="blue" />
	<mx:Button x="180" y="100" width="60" color="blue" />
	<mx:Button x="240" y="100" width="60" color="blue" />
	<mx:Button x="300" y="100" width="60" color="blue" />
	<mx:Button x="360" y="100" width="60" color="blue" />

	<mx:Button x="0" y="120" width="60" color="red" />
	<mx:Button x="60" y="120" width="60" color="blue" />
	<mx:Button x="120" y="120" width="60" color="blue" />
	<mx:Button x="180" y="120" width="60" color="blue" />
	<mx:Button x="240" y="120" width="60" color="blue" />
	<mx:Button x="300" y="120" width="60" color="blue" />
	<mx:Button x="360" y="120" width="60" color="blue" />

All the ActionScript code is written within the <mx:Script> and </mx:Script> tags. The content within the script tags must be enclosed within CDATA construct. This prevents the contents of the script to be interpreted as XML. In the script, we declare two arrays with [Bindable] tag. The [Bindable] tag allows the arrays to be bound to a control like ComboBox.

		public var Months:Array =
["January", "February",
	"March", "April", "May", "June", "July", "August",
	"September", "October", "November", "December"]; // Months Array
	public var Years:Array = new Array(8100); // Years Array
	import mx.controls.Alert;
	import mx.controls.Button;
	import flash.utils.Timer;
	public var month:int;
	public var year:int;

The setYears() function is called immediately after the application starts. This function fills the Years array with years between 1900 and 9999 and displays the current year and current month in the ComboBox controls. This function also declares a timer to display running time
on a Button. Finally it calls the show() method to display the calendar for the selected month and year.

public function setYears():void
	for (var ctr:int = 1900; ctr < 10000; ctr++)	// Fill Years array
		Years[ctr - 1900] = ctr;
	var currdate:Date = new Date();
	yearlist.selectedIndex = currdate.getFullYear() - 1900;// Display current year
	monthlist.selectedIndex = currdate.getMonth();	// Display current month
	var timer:Timer = new Timer(1000);	// Declare timer
	timer.addEventListener(TimerEvent.TIMER, displaytime);	// Add listener
	timer.start();	// Start timer
	show();	// Display calendar

The displaytime() function is the event function to display the current time.

public function displaytime(e:Event):void
	var currdate:Date = new Date();	// Retrieve current date
	var hours:int = currdate.getHours();	// Retrieve current hour
	var minutes:int = currdate.getMinutes();	// Retrieve current minute
	var seconds:int = currdate.getSeconds();	// Retrieve current second
	var h:String = (hours < 10)?"0" +
	hours.toString():hours.toString();	// Convert single digit year to two digit
	var m:String = (minutes < 10)?"0" +
	minutes.toString():minutes.toString();// Convert single digit minute to two digit
	var s:String = (seconds < 10)?"0" +
	seconds.toString():seconds.toString();// Convert single digit second to two digit
	timerbutton.label = h + ":" + m + ":" + s;	// Display current time

The show() function retrieves the selected month and year and displays the calendar.

public function show():void
	month = monthlist.selectedIndex;	// Retrieve selected month
	year = yearlist.selectedIndex + 1900; // Retrieve selected year
	var newdt:Date = new Date(year, month, 1);    // Initialize first day of 
						// the selected month
	var dow:int = newdt.getDay();	// Find day of the week of the 
					// first day of the month
	var ctr:int;
	for(ctr=7;ctr<49;ctr++)		// Clear text on all buttons
		var btn:Button = Button(datepanel.getChildAt(ctr));
		btn.label = "";
	for(ctr=0;ctr<dow;ctr++)		// Skip positions before 
					// the first day of the month
	var n:int = 1;
	while(n<=maxdays(month,year))	// Display days from 1 till 
					// the last day of the month
		var btn1:Button = Button(datepanel.getChildAt(ctr + 7));
		btn1.label = n.toString();
		var currdate:Date = new Date();	// Retrieve current date
		if (year == currdate.getFullYear() &&
			month == currdate.getMonth() && n == currdate.getDate())
			btn1.setStyle("color", "green");	// Display current 
							// date in green color
			if (btn1.x == 0)
				btn1.setStyle("color", "red"); // Display Sunday 
							// in red color
				btn1.setStyle("color", "blue"); // Display other 
							// days in blue color

The maxdays() function returns the maximum number of days in a given day and year.

public function maxdays(month:int,year:int):int
	if (month == 1)
		if ((year % 4 == 0 && year % 100 != 0) || 
				year % 400 == 0) 	// Check for leap year
			return 29;		// Leap year
			return 28;		// Non-Leap year
	else if(month==3||month==5||month==8||month==10)
		return 30;	// Months with 30 days
		return 31;	// Months with 31 days

The changecolor() function checks the number and sets background color for the panels.

public function changecolor(n:int):void
	   case 1:
		   selectionpanel.setStyle("backgroundColor", "black");
		   datepanel.setStyle("backgroundColor", "black");
	   case 2:
		   selectionpanel.setStyle("backgroundColor", "white");
		   datepanel.setStyle("backgroundColor", "white");
	   case 3:
		   selectionpanel.setStyle("backgroundColor", "red");
		   datepanel.setStyle("backgroundColor", "red");
	   case 4:
		   selectionpanel.setStyle("backgroundColor", "green");
		   datepanel.setStyle("backgroundColor", "green");
	   case 5:
		   selectionpanel.setStyle("backgroundColor", "blue");
		   datepanel.setStyle("backgroundColor", "blue");
	   case 6:
		   selectionpanel.setStyle("backgroundColor", "yellow");
		   datepanel.setStyle("backgroundColor", "yellow");
	   case 7:
		   selectionpanel.setStyle("backgroundColor", "cyan");
		   datepanel.setStyle("backgroundColor", "cyan");
	   case 8:
		   selectionpanel.setStyle("backgroundColor", "magenta");
		   datepanel.setStyle("backgroundColor", "magenta");

Points of Interest

In order to compile the program, I have used the Flex 3 SDK. The program can be compiled from the command line using the following command:

mxmlc Calendar.mxml

To view the resulting Calendar.swf file, you require Flash player to be installed on the computer. The swf file can be displayed on any Flash enabled browser. The swf file can also be viewed by embedding it in an HTML file as follows:

<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

WIDTH="700" HEIGHT="450" 

<PARAM NAME="MOVIE" VALUE="Calendar.swf">
<PARAM NAME="SCALE" value="noborder">
<EMBED SRC="Calendar.swf" WIDTH="700" HEIGHT="450" PLAY="true" LOOP="true" 

QUALITY="high" scale="noborder" 



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Azim Zahir
Instructor / Trainer NIIT, India
India India
I am a trainer by profession. Currently I am working with NIIT (Mumbai, India) as a Senior Faculty. I enjoy programming as a hobby. My favorite technologies are Flash, Flex and Silverlight.

Of late I have developed keen interest in WPF and Windows Mobile programming.

Apart from computers, my favorite pastime is bicycling.

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.190214.1 | Last Updated 22 Aug 2011
Article Copyright 2011 by Azim Zahir
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid