Tuesday, November 2, 2010

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

Today we will add functionality to the "Clear Day" button in our edit window.

What is that button supposed to do? If the day we selected is already in the highlightDates array, then it should be removed from there, calendar should become visible and edit window - invisible. If the day we selected is not in the highlightDates array, then we do the same thing, except that we don't remove anything from the array.

We also need to make the input text display the current description of the highlighted day, if we selected an already highlighted date.

So, let's edit our editHighlight function. We will add 2 more variables - one is a boolean that is true when we selected a highlighted day (and false when we selected a non-highlighted day), and second variable is a number that represents the current highlighted day's ID in the array (if it is highlighted day):

var currentDayHighlighted:Boolean;
var currentDayHighlightArrayID:Number;

function editHighlight(evt:MouseEvent):void
{
edit_desc_input.text=""
currentDayHighlighted=false;
currentDayHighlightArrayID=NaN;
for (var cd:int=0; cd<highlightDates.length; cd++)
{
if (highlightDates[cd].day == evt.target.text && highlightDates[cd].month == firs.month+1 && highlightDates[cd].year == firs.fullYear)
{
edit_desc_input.text=highlightDates[cd].desc
currentDayHighlighted=true;
currentDayHighlightArrayID=cd;
}
}

visibleEditWindow(true);
visibleCalendar(false);
}

As you can see, we simply take the description from the array and put it in the input field.

Now, we'll add some functionality to our clear button:

edit_desc_clear.addEventListener(MouseEvent.CLICK, clearCurrentDay);

function clearCurrentDay(MouseEvent):void{
if(currentDayHighlighted){
highlightDates.splice(currentDayHighlightArrayID, 1);
}
visibleCalendar(true);
visibleEditWindow(false);
compute();
}

Here are the results:


And the full code:

var highlightDates:Array = [];

var _loader:URLLoader = new URLLoader();
var _data:XML = new XML();

_loader.addEventListener(Event.COMPLETE, readXML);

_loader.load(new URLRequest("highlightedDates.xml"));

function readXML(event:Event):void
{
_data = new XML(event.target.data);
parseXML(_data);
}
function parseXML(xmlData:XML):void
{
for each (var day in xmlData.day)
{
highlightDates.push({day: day.@day, month: day.@month, year: day.@year, desc: day});
}
}


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

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 dayArray:Array = [];

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;
dayArray.push(c);
}

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 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=days[firs.day]; a<maxdays+days[firs.day]; a++)
{
allcells[a].addEventListener(MouseEvent.CLICK, displayDescription);
allcells[a].doubleClickEnabled = true;
allcells[a].addEventListener(MouseEvent.DOUBLE_CLICK, editHighlight);
}


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

import fl.controls.TextInput;
import fl.controls.Button;

var edit_desc_input:TextInput = new TextInput();
edit_desc_input.width = 205;
edit_desc_input.height = 50;
edit_desc_input.x = 10;
edit_desc_input.y = 80;
addChild(edit_desc_input);

var edit_desc_clear:Button = new Button();
edit_desc_clear.x = 10;
edit_desc_clear.y = 140;
edit_desc_clear.label = "Clear day";
addChild(edit_desc_clear);

var edit_desc_apply:Button = new Button();
edit_desc_apply.x = 115;
edit_desc_apply.y = 140;
edit_desc_apply.label = "Apply";
addChild(edit_desc_apply);

var edit_desc_text:TextField = new TextField();
edit_desc_text.x = 10;
edit_desc_text.y = 50;
edit_desc_text.width = 200;
edit_desc_text.height = 20;
edit_desc_text.selectable = false;
edit_desc_text.text = "Highlight this day with description:";
addChild(edit_desc_text);

visibleEditWindow(false);

var currentDayHighlighted:Boolean;
var currentDayHighlightArrayID:Number;

function editHighlight(evt:MouseEvent):void
{
edit_desc_input.text=""
currentDayHighlighted=false;
currentDayHighlightArrayID=NaN;
for (var cd:int=0; cd<highlightDates.length; cd++)
{
if (highlightDates[cd].day == evt.target.text && highlightDates[cd].month == firs.month+1 && highlightDates[cd].year == firs.fullYear)
{
edit_desc_input.text=highlightDates[cd].desc
currentDayHighlighted=true;
currentDayHighlightArrayID=cd;
}
}

visibleEditWindow(true);
visibleCalendar(false);
}

function visibleEditWindow(vis:Boolean):void
{
edit_desc_input.visible = vis;
edit_desc_clear.visible = vis;
edit_desc_apply.visible = vis;
edit_desc_text.visible = vis;
}

function visibleCalendar(vis:Boolean):void
{
for (var v:int=0; v<42; v++)
{
allcells[v].visible = vis;
}
for (var d:int=0; d<7; d++)
{
dayArray[d].visible = vis;
}
yearpicker.visible = vis;
monthpicker.visible = vis;
dayDescription.visible = vis;
}

edit_desc_clear.addEventListener(MouseEvent.CLICK, clearCurrentDay);

function clearCurrentDay(MouseEvent):void{
if(currentDayHighlighted){
highlightDates.splice(currentDayHighlightArrayID, 1);
}
visibleCalendar(true);
visibleEditWindow(false);
compute();
}

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

No comments:

Post a Comment