Saturday, October 30, 2010

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

Today we will make it so that if today is a highlighted day, we get the description of this day without clicking on the cell.

To accomplish this, we will need to create another loop in our compute function. Make sure it is located after the 'dayDescription.text="";' line, or it will get erased all the time.

Here it is:

for (var n:int=0; n<highlightDates.length; n++){
if(highlightDates[n].day == now.date && highlightDates[n].year == now.fullYear && highlightDates[n].month-1 == now.month && firs.fullYear == now.fullYear && firs.month == now.month){
dayDescription.text="TODAY: " + highlightDates[n].desc;
}
}

In the loop, I check if today is a highlighted day, and if the current month and year show the today's date. After that I simply update the description.

For the example below, I've created a new highlighted day which is always today - the day is set to now.date, month to now.month and year to now.fullYear.
var highlightDates:Array = [{day:26,month:6,year:2010,desc:"First post on kirill-poletaev.blogspot.com!"},{day:21,month:12,year:2012,desc:"The end of the world!"},{day:now.date, month:now.month+1, year:now.fullYear, desc:"This day is highlighted every day!"}];

You can create every-year/month dates using this method. For example, Christmas is every year, so your array element would be:

{day:25, month:12, year:now.fullYear, desc:"Christmas!"}

Sometimes, you might need to highlight a date of every month on a specific date, for example, on the 10th of every month a pokemon club meeting is held, etc.

{day:10, month:now.month+1, year:now.fullYear, desc:"Pokemon club meeting!"}

In the example below, you can see how the message will look, if today is highlighted day:


Full code here:

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

var highlightDates:Array = [{day:26,month:6,year:2010,desc:"First post on kirill-poletaev.blogspot.com!"},{day:21,month:12,year:2012,desc:"The end of the world!"},{day:now.date, month:now.month+1, year:now.fullYear, desc:"This day is highlighted every day!"}];

var dayDescription:TextField = new TextField();
addChild(dayDescription);
dayDescription.width = 200;
dayDescription.height = 40;
dayDescription.wordWrap = true;
dayDescription.y = 260;
dayDescription.x = 10;

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 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;
import flash.text.TextField;

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;
}
dayDescription.text="";

for (var n:int=0; n<highlightDates.length; n++){
if(highlightDates[n].day == now.date && highlightDates[n].year == now.fullYear && highlightDates[n].month-1 == now.month && firs.fullYear == now.fullYear && firs.month == now.month){
dayDescription.text="TODAY: " + highlightDates[n].desc;
}
}
}

compute();

for (var a:int=0; a<42; a++)
{
allcells[a].addEventListener(MouseEvent.CLICK, displayDescription);
}


function displayDescription(evt:MouseEvent):void
{
for (var s:int=0; s<highlightDates.length; s++)
{
if (evt.target.text == highlightDates[s].day && firs.fullYear == highlightDates[s].year && firs.month == (highlightDates[s].month-1))
{
dayDescription.text = highlightDates[s].day + "." + highlightDates[s].month + "." + highlightDates[s].year + " - " + highlightDates[s].desc;
}
}
}

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

No comments:

Post a Comment