Understanding Date(): Making a Calendar in AS3

Today we’ll build a fully functional calendar widget using AS3. It’s not rocket science, just an excellent example of using the Date class, which can handle all the complexity of extracting times, dates, months and years. We are also going to use some Flash components, and make sure that this calendar is portable to Flash Builder, FlashDevelop, and so on.

---

Final Result Preview

Let’s take a look at the final result we will be working towards:

---

Step 1: Brainstorming

Before starting to build the code, let’s take a look at what we’ll need:

• A class file, Calendar.as,
• A cell grid, to place dates,
• Labels for day names,
• Function to get current date, month and year,
• Function to get previous months’ days,
• Function to get future months’ days,
• Something to address the leap year issue,
• Interface to pick any month and year,
• Portability (for Flash Builder, FlashDevelop, and other IDEs).

---

Step 2: Preparing the Calendar.as Class File

In this step we shall create a basic structure of our Calendar.as class file.

There are several ways of creating ActionScript class file, like using FDT, Flash Builder, FlashDevelop. And, of course, the “Higgs Boson” of this multimedia world: the one true Flash IDE. I am using Flash Professional. Create an ActionScript 3.0 class file. The following is the basic structure of Calendar.as to start with.

package  {

 import flash.display.Sprite;

 public class Calendar extends Sprite {

  //variables

  public function Calendar () {

   // constructor code
  }
 }
}

I am sure that you have saved this class file as Calendar.as in the new folder for this calendar app. If not please save it.

Step by step we shall modify this Calendar.as to make it fully functional.

In the next step we will create a few text fields to label the weekdays and dates.

---

Step 3: Setting Up Text Formats for Dates and Weekdays

In this step we will modify our class by declaring some variables and creating a new function setTextFormat( fontFace, fontSize ).

We will also passing some parameters to the constructor of the class.

Initially it will look like “Syntactic Sugar”, but as the tutorial progresses it will become “Syntactic Salt”. Sorry, but we want to keep this class compact so as to make it easily portable. The idea is to have only one class and that’s all.

So, keep a close watch on the constructor’s number of parameters and their order as we progress.

Back to modifying the document class…

package  {

 import flash.display.Sprite;
 import flash.text.TextFormat;

 public class Calendar extends Sprite {

  //variables
  private var dateCellFormat:TextFormat;
  private var dayLabelTxtFmt:TextFormat;

  public function Calendar( fontFace:String = "Arial", fontSize:int = 15 )
  {
   setTextFormat( fontFace, fontSize );
  }

  private function setTextFormat(whichFont:String, size:int):void {

   //date text format
   dateCellFormat = new TextFormat();
   dateCellFormat.font = whichFont;
   dateCellFormat.color = 0xFFFFFF;
   dateCellFormat.size = size;
   dateCellFormat.align = "center";

   //day label text format
   dayLabelTxtFmt = new TextFormat();
   dayLabelTxtFmt.font = "_sans";
   dayLabelTxtFmt.color = 0x000000;
   dayLabelTxtFmt.size = size - 3;
  }
 }
}

Observe all the parameters passed to the constructor: we have already assigned values to them. This is the way to create default values for parameters. If no parameters are specified when instantiating the class, these default values will be used instead. We will see this in coming steps.

Nothing visible yet. Wait for a few steps.

---

Step 4: Creating Cell Grid to Arrange Dates

The calendar is made up of rows and columns forming a grid.

But how many rows and columns?

It depends on the calendar type – Vertical or Horizontal.

Vertical view needs 7 (rows) x 6 (columns), while horizontal view needs 6 (rows) x 7 (columns) as shown[...]

Read more: Understanding Date(): Making a Calendar in AS3