Sunday, July 4, 2010

How to create a calendar using only Actionscript 3 - Part 2

In the previous part, we created a base for our calendar. Now, we have to make it work like a real calendar.

Firstly, find this line in your code and delete it:


cell.text=(i+1).toString();

You will understand later why.

We need to define 2 dates, one for today (var now), and second for the selected month's and year's first date (var firs).

var now:Date = new Date();
var firs:Date = new Date(now.fullYear, now.month, 1);


In the previous tutorial we set Monday as the first day of the week, however Sunday is the first day of the week by default. That is why we need to create a new Array to swap their places (remember that they start counting from 0):

var days:Array=new Array(6,0,1,2,3,4,5);


Next we create a function that will compute the values of each cell when asked.
The first function of compute(); will be setting the first day's label to "1".

function compute() {
allcells[days[firs.day]].text=1;
allcells[days[firs.day]].setTextFormat(cellformat)
}

Next, the leap year and maximum days in a month.

function compute() {
allcells[days[firs.day]].text=1;
allcells[days[firs.day]].setTextFormat(cellformat)

var maxdays=30;
var leapyear:Number;

if (firs.fullYear%4==0&&firs.fullYear%100!=0||firs.fullYear%400==0) {
leapyear=1;
} else {
leapyear=0;
}
 
if (firs.month==0||firs.month==2||firs.month==4||firs.month==6||firs.month==7||firs.month==9||firs.month==11) {
maxdays=31;
} else if (firs.month==3 || firs.month==5 || firs.month==8 || firs.month==10) {
maxdays=30;
} else if (firs.month==1 && leapyear==1) {
maxdays=29;
} else {
maxdays=28;
}
}

Finally, we generate numbers for the cells:

var p:Number;
 for (p=1; p < maxdays; p++) {
  allcells[days[firs.day]+p].text=p+1;
  allcells[days[firs.day]+p].setTextFormat(cellformat)
 }
}

So the overall code now should be:
var cellformat:TextFormat = new TextFormat();
cellformat.color=0x012943
cellformat.size=16
cellformat.align="right"

var cformat:TextFormat = new TextFormat();
cformat.color=0x000000
cformat.size=14
cformat.align="center"

var weekdays:Array = new Array("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun");

var u:uint
// the first loop to add week day names

for (u=0; u<7; u++){
 
var c:TextField = new TextField();
c.selectable=false
c.width=30
c.text=weekdays[u]
c.setTextFormat(cformat)

addChild(c);
c.x=10+(30*u)
c.y=10

 }

var i:uint
var allcells:Array = new Array();
// the second loop to create cells

for (i=0; i<42; i++){
 
var cell:TextField = new TextField();
cell.background=true
cell.backgroundColor=0x99CCFF
cell.border=true
cell.borderColor=0x9999CC
cell.selectable=false
cell.width = cell.height = 24
cell.setTextFormat(cellformat)

addChild(cell);
cell.x=10+(30*(i-(Math.floor(i/7)*7)))
cell.y=40+(30*Math.floor(i/7))

allcells.push(cell);
}

var now:Date = new Date();
var firs:Date=new Date(now.fullYear,now.month,1);

var days:Array=new Array(6,0,1,2,3,4,5);

function compute() {
allcells[days[firs.day]].text=1;
allcells[days[firs.day]].setTextFormat(cellformat)

var maxdays=30;
 var leapyear:Number;

 if (firs.fullYear%4==0&&firs.fullYear%100!=0||firs.fullYear%400==0) {
  leapyear=1;
 } else {
  leapyear=0;
 }
 
 if (firs.month==0||firs.month==2||firs.month==4||firs.month==6||firs.month==7||firs.month==9||firs.month==11) {
  maxdays=31;
 } else if (firs.month==3 || firs.month==5 || firs.month==8 || firs.month==10) {
  maxdays=30;
 } else if (firs.month==1 && leapyear==1) {
  maxdays=29;
 } else {
  maxdays=28;
 }
 
 var p:Number;
 for (p=1; p < maxdays; p++) {
  allcells[days[firs.day]+p].text=p+1;
  allcells[days[firs.day]+p].setTextFormat(cellformat)
 }
}

compute();

Now our calendar displays the days of the current month.
(Results may vary)

Next time, we will add more functionality.

Related:

How to create a calendar using only Actionscript 3 - part 1
How to create a calendar using only Actionscript 3 - part 3
How to create a calendar using only Actionscript 3 - part 4
How to create a calendar using only Actionscript 3 - part 5
How to create a calendar using only Actionscript 3 - part 6
How to create a calendar using only Actionscript 3 - part 7
How to create a calendar using only Actionscript 3 - part 8
How to create a calendar using only Actionscript 3 - part 9
How to create a calendar using only Actionscript 3 - part 10
How to create a calendar using only Actionscript 3 - part 11
How to create a calendar using only Actionscript 3 - part 12

1 comment:

digital signatures said...

I am a fresher and given an assignment to create a calendar using Actionscript.I know its not good that I am not making it myself but I am taking your code and surely I understood it.Thanks for helping in my grades.

Post a Comment