Monday, November 1, 2010

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

Today we will start making a CMS (Content management system) for our calendar - we will add an edit window for cells.

Here's what we're going to do today - try double clicking on a cell in the calendar (no functionality on buttons in the edit window yet):


First of all, we'll need to do some changes to our existing script. Firstly, remember the place where we create the week day labels (Mon, Tue, Wed, etc.)? We will need to create an Array to store all these text fields.

var dayArray:Array = [];

And in the compute function:

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

Now we also need to declare the maxdays variable outside the compute function:

var maxdays;

Now we will create a function that will allow us to toggle the visibility of our whole calendar - visibleCalendar.

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
}

So now, when needed, we can call visibleCalendar(false); to make the calendar invisible, and visibleCalendar(true); to make ir visible again.

Next step, creating the editing window. Just set up the input field, buttons and text field:

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

Now we can make visibleEditWindow function to toggle visibility of this editing window:

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

Next, find the loop where we give each cell click listener to display description. We need to add double-click listener to call out the edit window:

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

Now, we need to make sure the edit window is invisible in the beginning:

visibleEditWindow(false);

And the editHighlight function:

function editHighlight(evt:MouseEvent):void{
trace(evt.target.text);
visibleEditWindow(true);
visibleCalendar(false);
}

There we go. That's all for now. Next time, we will start adding functionality to our window to let users actually edit something through it.

Here's the whole 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);

function editHighlight(evt:MouseEvent):void{
trace(evt.target.text);
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
}

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