Thursday, October 28, 2010

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

Today we will highlight some days with different years and different months in our calendar!

First of all, create an Array of the days you want to highlight. I highlighted 2 dates - 28th August, 2011 and 12th December, 2012.

var highlightDates:Array = [{day:28,month:8,year:2011},{day:12,month:12,year:2012}];

Now, INSIDE the 'l' loop, we create another loop ('h' variable). This loop is responsible for checking if the current cell is highlighted (is in our array) and paints it with color, if it is.

var l:Number;
var h:Number;
for (l=41; l>=0; l--)
{
for (h=0; h<highlightDates.length; h++)
{
if (allcells[l].text == highlightDates[h].day && firs.fullYear == highlightDates[h].year && firs.month == (highlightDates[h].month-1))
{
allcells[l].backgroundColor = 0x00FF66;
}
}

allcells[l].alpha = 1;
if (allcells[l].text == now.date && firs.fullYear == now.fullYear && firs.month == now.month)
{
allcells[l].backgroundColor = 0x00FFCB;
}
}

Full code:

var highlightDates:Array = [{day:28,month:8,year:2011},{day:12,month:12,year:2012}];

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);


import fl.controls.ComboBox;
import fl.data.DataProvider;
import fl.events.ComponentEvent;

var monthsdata:Array = [
{label:"January", data:0},
{label:"February", data:1},
{label:"March", data:2},
{label:"April", data:3},
{label:"May", data:4},
{label:"June", data:5},
{label:"July", data:6},
{label:"August", data:7},
{label:"September", data:8},
{label:"October", data:9},
{label:"November", data:10},
{label:"December", data:11},
];

var monthpicker = new ComboBox();
monthpicker.dataProvider = new DataProvider(monthsdata);
addChild(monthpicker);
monthpicker.x = 10;
monthpicker.y = 230;

monthpicker.addEventListener(Event.CHANGE, monthHandler);

function monthHandler(event:Event):void
{
firs.month = ComboBox(event.target).selectedItem.data;
compute();
}

monthpicker.selectedIndex = now.month;

import fl.controls.NumericStepper;

var yearpicker = new NumericStepper();
yearpicker.maximum = now.fullYear + 30;
yearpicker.minimum = now.fullYear - 30;
yearpicker.value = now.fullYear;
addChild(yearpicker);
yearpicker.x = 130;
yearpicker.y = 230;

yearpicker.addEventListener(Event.CHANGE, yearHandler);
function yearHandler(event:Event):void
{
firs.fullYear = event.target.value;
compute();
}

function compute()
{
var d:Number;
for (d=0; d<42; d++)
{
allcells[d].text = "";
allcells[d].backgroundColor = 0x99CCFF;
}

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);
}
var l:Number;
var h:Number;
for (l=41; l>=0; l--)
{
for (h=0; h<highlightDates.length; h++)
{
if (allcells[l].text == highlightDates[h].day && firs.fullYear == highlightDates[h].year && firs.month == (highlightDates[h].month-1))
{
allcells[l].backgroundColor = 0x00FF66;
}
}

allcells[l].alpha = 1;
if (allcells[l].text == now.date && firs.fullYear == now.fullYear && firs.month == now.month)
{
allcells[l].backgroundColor = 0x00FFCB;
}
}
var q:Number;
for (q=1; q<(42-maxdays-days[firs.day]+1); q++)
{
allcells[days[firs.day] + q + maxdays - 1].text = q;
allcells[days[firs.day] + q + maxdays - 1].setTextFormat(cellformat);
allcells[days[firs.day] + q + maxdays - 1].alpha = 0.5;
}
var f:Number;
var prefirst = new Date(firs.fullYear,firs.month,firs.date - 1);
for (f=days[firs.day]; f>0; f--)
{
allcells[days[f]].text=prefirst.date-(days[firs.day]-f);
allcells[days[f]].setTextFormat(cellformat);
allcells[days[f]].alpha = 0.5;
}
}

compute();

And the results:


Try checking the december month of 2012 or august of 2011.

Thanks for reading!

Related:

How to create a calendar using only Actionscript 3 - part 1
How to create a calendar using only Actionscript 3 - part 2
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 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

2 comments:

Claunchster said...

How could I make it so that when someone clicked on a date that it would load a movie clip that I made?

Kirill Poletaev said...

If you read the next parts of this tutorial you'll find the answer how to listen to date clicks. The listener doesn't really load a movie clip, but I'm sure it will be easy to do it using the existing code. Let me know if you still have problems.

Post a Comment