Calendar in Flash MX

[snaxs]

Hello.. is it possible to make a date calendar in flashmx???
and highlight the date??? as every day passess?????

for example..

s m t w t f s
1 2 3 4 5 6
7 8 9 10 11 12 13


thanks.

[kO2n]

yes it is.

[ichido]

but it will be hard....lol

[Jerryscript]

If I understand you correct, this should work, but for some reason you must publish for flash player 6, not 7, the version of actinscirpt doesn't matter (strange):

[AS]// begin date initialization
now=new Date();
today=now.getDate(); // get today's date
month=now.getMonth(); // get the month
year=now.getYear(); // get the year
// use another Date object to find the lastdate
lastdate=new Date(year, month+1, 0);
lastday=lastdate.getDate(); // get the lastdate
daycount=1; // variable to keep track of days
weekcount=0; // variable to keep track of weeks
// end date initialization

// loop through the month's days and create calendar
while(daycount<=lastday){
now.setDate(daycount); // set the date object to current date
weekday=now.getDay(); // find the day of the week

// create the date movie clip
_root.createEmptyMovieClip(daycount,daycount+10);
with(_root[daycount]){
// create the date textfield with position based upon weekday and week counts
createTextField('thisDate',daycount+100,weekday*20 ,weekcount*30,17,20);
with(thisDate){
selectable=false;
if(_root.today==daycount){ // if the current day is today, change it's color
format=getTextFormat();
format.color=0xff0000;
setNewTextFormat(format);
}
text=daycount;
}
}
if(weekday==6){weekcount++;} // increment the weekcount
_root.daycount++; // increment the daycount
}
// end day creation loop
[/code]

This is the basic code I used to create this Calendar (http://jerryscript.hostrocket.com/flash/calendar) that stores notes in the SharedObject, hope it helps! :)

[snaxs]

aa great man worked perfectly but how can i change the font and size ???
format = getTextFormat();
format.color = 0x0099FF;
setNewTextFormat(format);
i can change the color... but if i put a font that i installed it doesn't work and if i put an already installed font like arial, tahoma etc etc
it does work but the font doesn't change...

o and how can i change the position of the numbers ???? i tryed putting the code in a MC but it had an error telling that the script is making the movie very slow..

[Jerryscript]

A created textfield's default font is 'Times New Roman' (if memory isn't gone), for other fonts, I believe you will need to create seperate textfields in the movie (in _root on frame 1 is best), and embed the fonts in these textfields, then hide them or use them as needed.

I'm sorry, I didn't really make it easy to change the font. The above code only changes the format attributes of today's date.

This should work (with some tweeking of the multipliers in the x,y positions multipliers). Set the default and current date's variables at the top of the code:

// formatting variables, change to suit your needs
todaysColor='0xff0000'; // the current date's color
defaultColor='0x000000'; // the default date color
todaysSize=15; // the current date's text size
defaultSize=15; // the default date size
// note- all fonts must be embeded in separate textfields
todaysFont='Arial'; // the current date's font
defaultFont='Arial'; // default date font
// end formatting variables

// begin date initialization
now=new Date();
today=now.getDate(); // get today's date
month=now.getMonth(); // get the month
year=now.getYear(); // get the year
// use another Date object to find the lastdate
lastdate=new Date(year, month+1, 0);
lastday=lastdate.getDate(); // get the lastdate
daycount=1; // variable to keep track of days
weekcount=0; // variable to keep track of weeks
// end date initialization

// loop through the month's days and create calendar
while(daycount<=lastday){
now.setDate(daycount); // set the date object to current date
weekday=now.getDay(); // find the day of the week

// create the date movie clip
_root.createEmptyMovieClip(daycount,daycount+10);
with(_root[daycount]){
// create the date textfield, let autosize determine position later
createTextField('thisDate',daycount+100,0,0,0,0);
with(thisDate){
autosize=true;
selectable=false;
text=daycount;
if(_root.today==daycount){
// if the current day is today, change it's color
format=getTextFormat();
format.color=_root.todaysColor;
format.size=_root.todaysSize;
format.bold=true;
format.font=_root.todaysFont;
setTextFormat(format);
}else{
// if the current day is not today, use default color
format=getTextForam();
format.color=_root.defaultColor;
format.size=_root.defaultFont;
format.font=_root.defaultSize;
setTextFormat(format);
}
// use the first date's textfield attributes to set the
// calendar's spacing, modify the multiplier to
// change the date's spacing
if(daycount==1){_root.width=_width*2;_root.height= _height*2;}
_x=weekday*_root.width;
_y=weekcount*_root.height;
}
}
if(weekday==6){weekcount++;} // increment the weekcount
_root.daycount++; // increment the daycount
}
// end day creation loop

[Jerryscript]

I really should read ALL your questions before replying! LOL I edited several times, then decided to change it into a prototype to make it easier to use in other movie clips. See sample usage code at the bottom:


// formatting variables, change to suit your needs
todaysColor='0xff0000'; // the current date's color
defaultColor='0x000000'; // the default date color
todaysSize=15; // the current date's text size
defaultSize=15; // the default date size
// note- all fonts must be embed in separate textfields
todaysFont='Arial'; // the current date's font
defaultFont='Arial'; // default date font
// end formatting variables

MovieClip.prototype.makeCalendar=function(xoff,yof f){
theLevel=this.getLevel();
// begin date initialization
now=new Date();
today=now.getDate(); // get today's date
month=now.getMonth(); // get the month
year=now.getYear(); // get the year
// use another Date object to find the lastdate
lastdate=new Date(year, month+1, 0);
lastday=lastdate.getDate(); // get the lastdate
daycount=1; // variable to keep track of days
weekcount=0; // variable to keep track of weeks
// end date initialization

// loop through the month's days and create calendar
while(daycount<=lastday){
now.setDate(daycount); // set the date object to current date
weekday=now.getDay(); // find the day of the week

// create the date movie clip
with(this){
createEmptyMovieClip(daycount,theLevel+daycount+10 );
with(eval(daycount)){
// create the date textfield with position based upon weekday and week counts
createTextField('thisDate',theLevel+daycount+100,0 ,0,0,0);
with(thisDate){
autosize=true;
selectable=false;
text=daycount;
if(today==daycount){ // if the current day is today, change it's color
format=getTextFormat();
format.color=_root.todaysColor;
format.size=_root.todaysSize;
format.bold=true;
format.font=_root.todaysFont;
setTextFormat(format);
}else{
format=getTextForam();
format.color=_root.defaultColor;
format.size=_root.defaultFont;
format.font=_root.defaultSize;
setTextFormat(format);
}
if(daycount==1){width=_width*2;height=_height*2;}
_x=weekday*width+xoff;
_y=weekcount*height+yoff;
}
}
if(weekday==6){weekcount++;} // increment the weekcount
daycount++; // increment the daycount
}}
// end day creation loop
}; // end calendar prototype

// Sample usage: create a movie clip called calendar
// then call makeCalendar prototype with x/y offset values
_root.createEmptyMovieClip('calendar',1);
calendar.makeCalendar(200,100);

[snaxs]

hehe no problem... hey man it worked ok! but i still dont know how to position mi calendar in the movie :(
because is going to be a small swf loaded into my main movie i want the calendar to be in the center of my movie...and also put the months on top... and i cant change the font...
i can change the todaysFont but not the DefaultFont..
sorry to be a buzz. !!! :smirk:

[Jerryscript]

To position the calendar in the movie clip it is created in, you make the call to the prototype function with the x,y values you want it positioned within the movie clip. The above usage example creates it at _x=200 and _y=100 in the movie clip it is calledin.

Add this code just before the while statement to add a month textfield at the top of the calendar:


// create the month textfield
months=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','S ep','Oct','Nov','Dec'];
// you can change the month names to full names if you like
createTextField('monthName',theLevel+daycount+9,0, 0,0,0);
with(monthName){
type='static';
selectable=false;
format=getTextFormat();
format.size=_root.defaultSize;
format.color=_root.defaultColor;
format.font=_root.defaultFont;
autosize=true;
setNewTextFormat(format);
text=months[month];
_x=xoff*1.1;
_y=-_root.defaultSize+yoff*0.9;
}



Shoot, writting all this on-the-fly, I'm leaving some typos in there, here is the complete code with teh default format/size bug fixed:


// formatting variables, change to suit your needs
todaysColor='0xff0000'; // the current date's color
defaultColor='0x000000'; // the default date color
todaysSize=15; // the current date's text size
defaultSize=15; // the default date size
// note- all fonts must be embed in separate textfields
todaysFont='Arial'; // the current date's font
defaultFont='Bimini'; // default date font
// end formatting variables

MovieClip.prototype.makeCalendar=function(xoff,yof f){
theLevel=this.getLevel();
// begin date initialization
now=new Date();
today=now.getDate(); // get today's date
month=now.getMonth(); // get the month
year=now.getYear(); // get the year
// use another Date object to find the lastdate
lastdate=new Date(year, month+1, 0);
lastday=lastdate.getDate(); // get the lastdate
daycount=1; // variable to keep track of days
weekcount=0; // variable to keep track of weeks
// end date initialization

// create the month textfield
months=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','S ep','Oct','Nov','Dec'];
createTextField('monthName',theLevel+daycount+9,0, 0,0,0);
with(monthName){
type='static';
selectable=false;
format=getTextFormat();
format.size=_root.defaultSize;
format.color=_root.defaultColor;
format.font=_root.defaultFont;
autosize=true;
setNewTextFormat(format);
text=months[month];
_x=xoff*1.1;
_y=-_root.defaultSize+yoff*0.9;
}
// loop through the month's days and create calendar
while(daycount<=lastday){
now.setDate(daycount); // set the date object to current date
weekday=now.getDay(); // find the day of the week

// create the date movie clip
with(this){
createEmptyMovieClip(daycount,theLevel+daycount+10 );
with(eval(daycount)){
// create the date textfield with position based upon weekday and week counts
createTextField('thisDate',theLevel+daycount+100,0 ,0,0,0);
with(thisDate){
autosize=true;
selectable=false;
text=daycount;
if(today==daycount){ // if the current day is today, change it's color
format=getTextFormat();
format.color=_root.todaysColor;
format.size=_root.todaysSize;
format.bold=true;
format.font=_root.todaysFont;
setTextFormat(format);
}else{
format=getTextFormat();
format.color=_root.defaultColor;
format.font=_root.defaultFont;
format.size=_root.defaultSize;
setTextFormat(format);
}
if(daycount==1){width=_width*2;height=_height*2;}
_x=weekday*width+xoff;
_y=weekcount*height+yoff;
}
}
if(weekday==6){weekcount++;} // increment the weekcount
daycount++; // increment the daycount
}}
// end day creation loop
}; // end calendar prototype

// Sample usage: create a movie clip called calendar
// then call makeCalendar prototype with x/y offset values
_root.createEmptyMovieClip('calendar',1);
calendar.makeCalendar(200,100);


Hope that helps, I'm outta here! :)

[snaxs]

hey man thanks alot everything worked great. now for my last question i promise !!!!

how can I adjust the separation between the dates... ( numbers )
thanks.

[Jerryscript]

You adjust the spacing by adjusting your multipliers on these two lines:


_x=weekday*width+xoff;
_y=weekcount*height+yoff;

It currently uses the width and height of the text itself, add or subtract values from these lines to adjust spacing.

Have a great day!

[snaxs]

Thanks alot man !!! no more questions i promise ! :beam:

[jewelsmith]

Hi Jerryscript,
I am just beginning in Flash 2004 and want to make a Calendar SWF as well. What I don't get from your code is where the reference to "MovieClip.prototype.makeCalendar" and it's getlevel() function comes from.
I have looked in several books and the Flash Help Dictionary. Am I missing a piece of Code or something?

Thanks
Newbie Flashfiend

[Jerryscript]

A prototype is a method of defining functions and parameters for all objects of the prototype, in this case, all movie clips.

Here, we define a prototype to create a calendar in a movie clip. Next we create an empty movie clip and call the prototype, which activates the prototype for that movie clip.

The getLevel() function is used to determine the level of the movie clip the prototype was called to on. Then we can use that as a baseline level for everything created within this movie clip, ensuring that nothing is created on the same level (which would replace whatever is already on that level).

Both MovieClip.prototype and getLevel() are deprecated in FlashMX2004's ActionScript2, so there are other ways to create these objects/functions/properties. I wrote this script in AS1.

For more info on prototypes, try a search in these forums on them, and for tons of great prototypes you can use, check out this link: http://proto.layer51.com/

[jewelsmith]

Great info The prototype is Deep! :bounce: Thank you
I am a rank beginner so I appreciate your help.

I still don't completely follow it yet. So you call the MovieClip.prototype.makeCalendar by declaring it a prototype?

Would it be too much to ask to put this in the context of a SWF?

Since, is this going away in AS2, would you do this through extending the Movie clip in AS2?

Thanks again I will study the code harder in this light!!
Thanks for being there C:-)

[Jerryscript]

I don't use FMX2004, but I believe you initialize an object and set the movie clip to that object.

Still happy with AS1 here :)

[righty]

JerryScript, hello and nice to meet you. this is first post on this site. I actually just found the site. Looks great and very helpful. I am very new to flash and would like to create a calendar exactly like the one you have here. Just tweak it a little bit to fit where i need it. I have been learning actionscript for the past week or so, this seems a little advanced for me. The code you displayed, is that all you used to create the calendar? Can you create a full .swf in just actionscript? By any chance have you posted a .fla for users to download and view how you made the calendar?


thanks for any help on this.

righty

[Jerryscript]

The code you displayed, is that all you used to create the calendar?
Yes, actionscript is all I used.


Can you create a full .swf in just actionscript?
You can create a full featured SWF file using only actionscript, but there are many things Flash can do that require the FlashIDE or another Flash creation application to create.


By any chance have you posted a .fla for users to download and view how you made the calendar?
Sorry to say, I don't use Flash to create SWF files, I use PHP's Ming (http://ming.sourceforge.net) library to create them from coding, so I do not have an FLA to offer, only the actionscript, or if you like, the PHP/Ming coding.

Read through the various posts in this thread, and you should be able to figure out how to modify most parameters of the calendar code. Anything not covered that you would like to modify, post here and I'll try to help!

Happy Holidays!

[drumsnroses]

Ok, i really like the calendar on your website because of the way you click on dates and they enlarge. But I would like to know how to do that a little differently. I need to be able to insert the contect for each day so, when other people click on the days, they can read it, not insert their own content. Is this possible?

[Jerryscript]

Ok, i really like the calendar on your website because of the way you click on dates and they enlarge. But I would like to know how to do that a little differently. I need to be able to insert the contect for each day so, when other people click on the days, they can read it, not insert their own content. Is this possible?
The calendar you mentioned, http://jerryscript.hostrocket.com/flash/calendar/ , is meant for local use. However, the method of storing data to the SharedObject can easily be altered to use data retrieved from a txt file, database, etc. I will try to find the time to do this, but I currently have three projects in progress, so I make no promises as to when I can get it done.

[drumsnroses]

thanks alot . . . anytime you can get around to it. . . . . I'm just so unfamiliar with how actionscript works to know where to start

[n4c]

i like that calendar...

n4c

[shamarque]

Sorry to say, I don't use Flash to create SWF files, I use PHP's Ming library to create them from coding, so I do not have an FLA to offer, only the actionscript, or if you like, the PHP/Ming coding.

izzit possible for u to share or juz to show the screen shot of ur PHP/Ming coding.

i really interested to learn how to develop ur calendar.

thanks in advance.

[Jerryscript]

While it is created via PHP/Ming, the PHP coding isn't necessary as it is all actionscript wrapped in a SWF file via Ming. You an decompile it with most any SWF decompiler, I recomend Flare (http://www.nowrap.de/flare.html), to see the actionscript used.

[shamarque]

thanks a lot dude...

after seeing ur script... omg... i'm shock.. make me crazy :krazy:

may i study it, edit it & use it?

[shamarque]

i study ur script.. hav lots to ask u...


_root.createTextField("holderDate", 8020, 800, 10, 0, 0);

wut is "8020, 800, 10, 0, 0" stand for?

sorry if i ask stupid question.. i try 2 read thru.. but i cant found it..

neway, thanks in advance.

[Jerryscript]

You probably should ask these sort of questions in the actionscript forum. :)

When creating a textfield dynamically via actionscript, you have 6 parameters to be set:

The textfield object's name
The level or depth to set it at
The x position
The y position
The width
The height

Check the actionscript dictionary included with flash or available at macromedia's site for more details

[shamarque]

thanks jerry.. really appreciate it.

:thumb:

[coo_red]

HI JERRYSCRIPT I WAS WONDERING IF I CAN SEE THE FLA. FILE OF YOUR CALENDAR SO I CAN SEE EXACTLY WHO YOU DID IT:cross-eye :be:

[mmubashar]

Hey Jerry, you've done a great job. I was wondering, is there any way we can modify this content so that we can create a variable (say "calendar") and this variable will contain the data for the calendar. Next, we just have to create a dynamic text box with the instance name of "calendar" and the variable "calendar" too. Whats good about this method is, we do not have to manually edit the font properties etc. Whatever font style is set for the dynamic text box, will be used to load the calendar. Hows that? Can u explain what to change and what not to? im still a newbie in actionscript.

One more thing, lets say if we want to add a background for this calendar, and it changes every month with a different picture, what is to be done?

Thanks Jerry.. You've done a great job..

[BetaWar]

THey have a preset calendar that you can use, built into flash. I am not sure you will want to but here is how to access it:

Goto Window => Components (Ctrl + F7), then User Interface => DateChooser

It highlights the current date on its own.

[skull_demon]

i everybody i want to make a calendar but i don't know how, can somebody help me.
i was trying to do one like this

http://www.usflashmap.com/products/flash_calendar/flash_calendar.htm

http://www.usflashmap.com/products/flash_calendar/flash_calendar.htm
plz

[jeckx2]

Do you have any download files for this? thanx in advance bro :yoshi:

[Jerryscript]

I've had tons of request for info on event listings methods, originating from people who have read this thread, so I thought the following link might be of use:

http://tools.ietf.org/html/rfc2445#section-4.8.5

It is a reference to the iCalendar standards used by most software that includes scheduling, including Google Calendar and iCal on Mac. If you adhere to these standards, you should be able to create your calendar with the ability to import/export events from/to other calendar applications.

[dimidesign]

Hi everyone, I have to create a calendar in flash (I have Flash 8)similar to this : http://www.rentors.org/calendar.aspx?propertyid=42218&cid=5.
I tried to follow the messages posted regarding calendars but, I have limited Flash knowledge and I got lost. I'm in a hurry and I am very close to panic.. I needed this yesterday!!

Thank you for your help!
dimi