Dynamic layout formula

1

hi. i’m trying to dynamically layout a calendar using actionscript and i’m no good at determining algorithms to quickly and efficiently lay things out. i was hoping for a little help with this one, please.

what i want to do is set it up per the image attached:

  • where there are 7 columns and a varying number of rows.

  • the top row has the 2 arrows and the month and year display.

  • the second row has all the day headings, i.e. S, M, T, W, R, F, S

  • and the rest of the rows will have the dates.

how do i come up with a nice clean formula to calculate the positions so all these elements align??

thanks. fumeng.

2

i was just recommended to use a nested loop where i calculate the y position in the outer loop and the x position in the inner. so am i right in thinking that it would go something like this…


var i:Number = 0;
while(++i < weekCount){
    var j:Number = 0;
    while(++j < dayCount){
// draw out the text fields for the days

where weekCount is the number of weeks in the month (0-4 or 5) and dayCount is the days of the week (sun - sat)

this would take care of drawing out the calendar days, but what about the month header with the arrows and the static days of the week that everything aligns up with??

thanks for following along. fumeng.

3

hi.

i’m still plugging away at this and had another question to get me back to the basics – which is where i think i need to begin again. i’m not sure i’m programming my nested loop correctly.

my thinking is that my outer loop will handle the vertical spacing between the rows. so my inner loop will draw out and position everything that is contained on the rows.

while drawing out the individual days, i don’t think that’s a problem. i can create 7 text fields (7 because my calendar has 7 columns) and set their width to width/7. that way they’ll be evenly spaced.

but if my first row is only 3 columns, i.e. the two arrows and the month and year display, how would i handle that? can it still be drawn out in the nested loop? do i handle drawing that out in the outer loop and the individual days in the inner loop?

perhaps i should just start with drawing a 7 column grid first. can anyone help me with that?

thanks. fumeng.

4

i wish i had one individual clip that holds all the individual date text fields.

the problem is that i have 30 clips with textfields inside them. the code below is what i use to create each individual clip.


_root.createEmptyMovieClip(dayCount, dayCount+10);

when i tried this it didn’t work:


_root.createEmptyMovieClip(dayCount, dayCount+10);
_root[dayCount]._x = width/2 - _root[dayCount]._width/2;
_root[dayCount]._y = monthName._height + 15;

it began in the middle of the stage and went far off to the right.

then i tried this just for fun:


_root.createEmptyMovieClip(dayCount, dayCount+10);
_root[dayCount]._x = 10;
_root[dayCount]._y = monthName._height + 15;

where 10 is the position just underneath the left arrow. and i give myself 15 pixels from the month and year display text field to start the next row. it works, definitely, but it seems like an ugly fix to me. i’m worried because if people resize this (it’ll eventually, at some point in time, be a component) maybe it won’t resize correctly because of the way i programmed it.

i’m worried – i think i built this the wrong way. i guess i was looking to neatly lay out a grid first with 7 columns and then build it that way. what do you think…did i build it the wrong way?

thanks for any help. fumeng.