A few months ago I sat down to make a calendar component, purely as a technical exercise, but because of the way that I set up the architecture it ended up being a fairly useful and easily extended component. So I thought I would share the component and make it open source so anyone could take it and change it and add to it.

You can find the code repository here.

I thought I would spend some time talking about its usage, and explaining some of my design decisions. Since I work primarily in Eclipse, I'll show screen shots and talk through how to use the project in Eclipse.

First, to use the component you'll need to add the project to your SVN Repository Explorer

and check out the latest branch. For my example I created a new project with the latest branch and called the project AS3Calendar.

For my example I then created a brand new project to use the calendar component, but presumably you would be using an existing project that you want to use the calendar in. My new project is called CalendarExample.

Next I right click on my CalendarExample project and click "Properties". From the Properties window I select "ActionScript Build Path" on the left navigation. I then click "Add Folder" and navigate to the "src" folder of the AS3Calendar project.

The AS3Calendar uses tween, so you'll have to add the "fl" namespace from your Flash installation to the CalendarExample project. While the Properties window is still open for the CalendarExample project click "Add Folder" again and navigate to that directory. In the below screen shot I show where mine is located, yours may very well be in a different location.

Once all that has been set up, it's time to implement. I open up my CalendarExample.as file and import the necessary classes. For this example we will just be using the Calendar and Day classes.

import net.tbarker.Calendar.Calendar;
import net.tbarker.Calendar.Day;

Next we create an instance of the Calendar class, and two instances of the Day class. We then add the Calendar instance to the stage.

var myCal:Calendar = new Calendar()
var fDay:Day = new Day();
var bDay:Day = new Day();
addChild(myCal)

From there if we want to display a full month we can call the drawMonth function, passing in the numeric month and the two Day objects.

myCal.drawMonth(6,fDay,bDay)

Or if we only want to display a week we can call the drawWeek function, passing in the numeric month, the numeric day of the month, and the two Day objects.

myCal.drawWeek(6,5,tempDay, backDay)

Here is the full implementation for the CalendarExample.as class:

package {
 	import flash.display.Sprite;
 	import  net.tbarker.Calendar.Calendar;
 	import net.tbarker.Calendar.Day;
 		
 	public class CalendarExample extends Sprite
 	{
  		public function CalendarExample()
  		{
   			var myCal:Calendar = new Calendar()
   			var fDay:Day = new Day();
   			var bDay:Day = new Day();
   			addChild(myCal)
   			myCal.drawMonth(6,fDay,bDay)	
   		}
  	}
}

Next I'll be exploring the Calendar class.

Read more from Tom Barker.