Actionscript 3 - Written by Artluvr on Thursday, April 17, 2008 17:27 - 56 Comments
Events Calendar – XML based – Actionscript 3, Flash CS3, Tweener
A beautiful calendar for displaying events that are read from an XML file. All animations are done with the Tweener class.
You can customize the following:
- The name of the xml file
- You can choose inside which movie clip the events will be shown.
- The skin color of the month, year, navigation arrows, names of days
- The padding between date blocks
- The width and height of each date block
- Tha alpha of each date block
- The background color of each date block
- The text color of each date block
- The color of the border of today’s date block
- The color of the date block that has events
- The width of the events textfield
You can add a calendar as simple as this:
var cal:Calendar = new Calendar(“events.xml”,events_mc,3,2008,0xFFFFFF, 8, 25, 25, 200,0×000000, 0.7,0xFFFFFF,0×666666,0×58CCFE,0×58CCFE);
addChild(cal);
The XML file looks like this:
<date day=”16″ month=”4″ year=”2008″>
<event title=”Event Title”><![CDATA[Event Text]]></event>
</date>
If you want the current month to be selected when the swf loads then you have to declare a variable of type Date and then get the month and year from that variable. For example your code should be like this:
var d:Date = new Date();
var cal:Calendar = new Calendar(”events.xml”,events_mc,d.month+1,d.fullYear,0xFFFFFF, 8, 25, 25, 200,0×000000, 0.7,0xFFFFFF,0×666666,0×58CCFE,0×58CCFE);
addChild(cal);
Price: € 6
Share and Enjoy:
56 Comments
Nick
Joe Walters
Hi,
I would like to be able to control the colour of the day box from within the xml. Best way would be to put a node in the xml for each item (e.g. number between 1-3) and then an item with 1 would be green, 2 would be blue and 3 would be red.
This means I could use it with a key on my site so it could be easy to see how many rooms are available in a guesthouse.
Can you please help?
Many thanks
What you have to do is the following:
In the XML file in the date tag add another attribute after the year attribute. Let’s call that new attributed “availability”. Give it the values that you need.
Now in the Calendar.as class you have to do the following changes:
In line 212 add var availability_attribute:XMLList = date[s].attributed(“availability”);
Now in line 215 (under the if statement) add
if(var availability_attribute==”1″){
day.changeColor(0×990000) //add the colors that you want
}
if(var availability_attribute==”2″){
day.changeColor(0×000000) //add the colors that you want
}
if(var availability_attribute==”3″){
day.changeColor(0×993300) //add the colors that you want
}
Finally, open the day.as class and do the following changes:
In line 124 write
public function changeColor(color:uint){
Tweener.addTween(this._background,{_color:color, time:0});
}
This is how you can do what you asked! I hope that I was helpfull
klokhammer
Got this error when doing som native customizing of the (excelent) calender: 5001: The name of package ‘caurina.transitions’ does not reflect the location of this file. Please change the package definition’s name inside this file, or move the file. C:\Documents and Settings\\Calendar\SpecialPropertySplitter.as
This error usually occurs when you don’t keep the tree structure of the Tweener classes. The package of the classes is caurina.transitions which means that you must have a folder cuarina and inside it another folder transitions and finally in there there should be all the classes of the as files (classes) of Tweener.
The caurina folder (which contains all of the above) should be placed in the same folder of your .fla file.
rincewind
Nice calendar — but can you fix the days of week labels? (Wednesday doesn’t come before Tuesday)
rincewind, thanks for pointing out!
Love the calendar … however I’m not quite sure I understand how to customize some things.
How do I change i so that when it is loaded the current month is the month shown?
Also along with that, if there is an event on the current day, will that be shown on the right hand side when it is first loaded?
Thanks!
Spyke, you change the starting month and year when initializing the calendar.
var cal:Calendar = new Calendar(”events.xml”,events_mc,3,2008,0xFFFFFF, 8, 25, 25, 200,0×000000, 0.7,0xFFFFFF,0×666666,0×58CCFE,0×58CCFE);
addChild(cal);
If you change the 3 (before 2008) with the current month number then the calendar will load the specified month.
Spyke, the calendar doesn’t support the functionality of showing the events of the current day when it first loads.
Destinee
great look calendar, i was wondering.. can this calendar post images as well for each event?
Also.. does it come with the FLA?
thanks
Destinee
Also, does it give you the option to enter multiple events on one day… ?? And… if it is actually the same day as an actual event… does the event info automatically load?
Destinee the calendar supports more than one event a day, but it doesn’t support images. Unfortunatelly it doesn’t automatically shows the events of the current day!
Dan
I purchased the calendar a while back and was wondering if there’s a way to have the calendar initialize with the current month so that the following code doesn’t need to be changed every month:
var cal:Calendar = new Calendar(”events.xml”,events_mc,3,2008,0xFFFFFF, 8, 25, 25, 200,0×000000, 0.7,0xFFFFFF,0×666666,0×58CCFE,0×58CCFE);
addChild(cal);
I don’t want to change 3,2008 every month. I’d like it to update automatically. Is that possible?
Dan, thank you for buying from Artluvr.com. What you need can be done really easily. All you have to do is declare a variable of type Date and then get the month and year from that variable. For example your code should be like this:
var d:Date = new Date();
var cal:Calendar = new Calendar(”events.xml”,events_mc,d.month+1,d.fullYear,0xFFFFFF, 8, 25, 25, 200,0×000000, 0.7,0xFFFFFF,0×666666,0×58CCFE,0×58CCFE);
addChild(cal);
Dan
Thanks for the quick response! Works like a charm!
Lisa
I recently purchased this calendar and think it’s brilliant. Just wandered if there is a way to make it only show 2009 so it won’t show last year and next year.
Thanks!
Lisa, thank you for your kind words! We would appreciate it if you could spread the word about our Artluvr.com.
Now, unfortunately it doesn’t support that kind of functionality. What you can do is go inside the code of the Calendar.as file and hide the arrows that change the month. You can do that by going to line 263 and adding the two following lines:
this._nextButton.visible=false;
this._previousButton.visible=false;
This will hide the two buttons and the users will not be able to change the month. Have the calendar to load automatically the current month.
Hope that helps
Hi,
I purchased the calendar and I love it. However I would like to have the days of the week and the months in Dutch. Is there a way to translate them?
Thnx,
Hans
Oops,
Found it in the Calendar.as
Rgrds,
Hans
Mio
Hi,there,I purchased your calendar a couple of months ago and was wondering if there is the possibility to highlight different types of events with different color?
Mio, the component doesn’t support something like this, and I cannot explain it in detail from here. What you have to do is add a color attribute to each event node in the xml file, read it from inside the AS3 class, and change the color of each event.
I like the calendar, great job guys. I was wondering if you can update the version with more options, like showing the date that you are, or even load images when you click. I would be interested then in buying it, now is great but limited.
Keep the good job guys
JJ, we are very happy to hear that you liked the calendar and thank you for your good works. We will schedule an upgrade to the Event Calendar and since you are the one who first suggested the upgrade you’ll get it for free!
Drin
While viewing the demo above i noticed that when i press on 1st may 2008(which is not highlighted), the information of 1st April 2008 will appear. Is there a way i can change it.
Randi
Artuvr,
Is it possible to stop the animation that occurs when you click the arrow for the next month, and how?
Thanks
Mc
Hey I agree with most ppl here, the calendar is awesome!!!
However, Im having trouble changing the dates and text color.
Ive tried replacing the codes in the .AS files, but im not being successful.
I’d appreciate any help here!
thnx =)
@Mc, all you have to do is change the color values at the constructor
var cal:Calendar = new Calendar(”events.xml”,events_mc,3,2008,0xFFFFFF, 8, 25, 25, 200,0×000000, 0.7,0xFFFFFF,0×666666,0×58CCFE,0×58CCFE);
gail
Fantastic calendar. Wish I would have found your’s first rather than the first ones I purchased.
I’m a little more conservative and was wondering if there was an easy way to remove the transitions or perhaps change them. A fade in and out would be nice.
Thanks!
@Gail,
Well all you have to do is change the Tweener commands so that the transition will happen at 0 seconds time.
Open the Calendar.as file and go to line 166 and add the following line:
day.alpha=0;
Then go to line 181 and add
day.x = _posX;
day.y = _posY;
Finally change line 183 to
Tweener.addTween(day,{time:0.5, alpha=1, delay:d/30, transition:”easeOutQuint”});
Hope that helps
@Randi, check the comment I wrote for Gail
Niko
Another question, i putted the whole event’s calendar to new movie clip, and copied the movieclip and the library to my other scene. Now it works except it doesnt show the upper part of the calender (example May 2008), the other date that is in the holder movie clip in the right doesn’t show either.
Niko
I i bought the event calender, and im having problems when i import it to my scene. The calender shows up fine, but dates and information dont show. And i planted the whole event calender in to movieclip because otherwise it would flout around and didn’t show up correctly
@Niko, if you can’t see the information and date then you have to embed the fonts that you are using.
@Niko, this should be a font problem. Try embeding them.
Niko
Thank you that helped a lot!! but i have one more problem. When i paste the calender to movie clip the calender doens\’t go to its place,it allways goes too down or too right, is there any way i could lock the calender down, so it woudn\’t float.
jer
I just bought the calendar… and it’s perfect… just what i was looking for!
I’m still a little new to this coding… so i was hoping you could expand on Dan’s inquiry on getting the Calendar to start on the current month.
the code i believe, you indicated, to make this happen is
var d:Date = new Date();
var cal:Calendar = new Calendar(”events.xml”,events_mc,d.month+1,d.fullYear,0xFFFFFF, 8, 25, 25, 200,0×000000, 0.7,0xFFFFFF,0×666666,0×58CCFE,0×58CCFE);
addChild(cal);
1. to which file to i add this code
2. within the file, what line to i add the code
thanks
-jer
jer
oop… found it in the Fla!
works beautifully!
-jer
jer
another question!
Is there a way to embed links into the event text?
-jer
Hi Artluvr,
very nice and well looking calender, exactly what I\’m looking for!!
But first some questions about it:
1. If I\’m making a website with this in it, can someone who doesn\’t know anything about \’as\’ or Flash upload/refresh text easily? Think \’content management\’! Or does this person needs to go into xml files and type updates in the scripts?
2. No support for images, but possible to make clickable links in the text on the right to show a new layer in the website (a swf layer within the site, on top of the \’0\’ layer with the calendar) with images?
3. Can I ad more menu buttons into this fla to make it a complete website or can it be used as a seperate layer in one of my own designs?
4. Can I let the calendar start with \’M\’ (Monday) instead of \’S\’ (Sunday)?
That\’s it for now, sorry for tthe rather long questions but really want to check this one, looks GREAT!!!!
Hope you can answer them.
Take care,
Roger NBH
Ray
Hi,
I wonder if there is a way for me to use this calendar in my Actionscript 2.0 file? Any ideas.
Thanks,
Ray
thanks for the prompt email, got it working great!
Emilio Munoz
Hi! Your app is just what I need! Can you tellme if you give me the .fla file when I buy it? I need to move position of the event MovieClip. Please answer me! Thanks!
Henry C
Never mind. I figured it out. UIloader component did the trick. thanks for the good program
Romualdo
O, no worries… managed to sort it out… just changed all the *.embedFonts to false in the calendar.as file… sweet…
Daniel
I’m looking for a nice calendar for my website and this looks something I like.
I want to show a event calender.
But is it possible to protect it with a password?
So that only the admin can add new events and not everybody?
Best regards,
Daniel
Jack
Will it have the current day shown upon loading?
Gaspar
Hello!
I just bought this calendar and am trying to load it inside another swf, but the text doesn’t apear. Only the days. No month or year information… The font is in the library but no month or year.
Any ideas?
Dave
I bought the calender some time ago and it works like a charm and was just what I was looking for.
There is only one problem/bug in it.
When you have made the dates that are used for an event will be highlited.
That’s great then you know something is comming up but the date that you used will show up in every other month.
Not highlited but when you click on it, it will show an event.
You can tested it in the demo above
May 4 shows a highlited events goto june 4 click on it and it will show the same event.
It’s not highlited but it will show the same events.
How can I change this? So it will show the events only once.
@Gaspar You will have to embed the fonts to the file that you wish to load it into
@Jack yes it will have the current day. You will have to pass the current date to the constructor though
@Daniel, no you cannot do it from inside the flash.
@Roger, hi roger.
1. He will have to change the xml file. Or you can dynamically create an xml file with php if you want to use a cms.
2. No unfortunately
3. I would advise you to use it in your own designs as a seperate layer
4. Right now it only starts with Sunday
@jer, no you can’t at this moment
william
how do i actually move the calendar along the x and y axis. i can move the background, and i can move the container. But, the actual calendar including days, month, navigation buttons etc stay located in the upper left hand corner of my flash page.
i am using cs4, that shouldn’t make any difference shoud it?
curiously,
william
@william, The calendar is a movieclip. You can just move it by changing the x and y properties. For example, cal.x = 100 or cal.y = 200
Leave a Reply
Most Popular Content
- thecodemonster.net has a new logo
- XML Based Fullscreen Image Rotator With Proportional Resize – Flash CS3 – Actionscript 3
- MP3 Player – XML based – Flash CS3, Actionscript 3, Tweener
- XML based banner rotator – Actionscript 3, Flash CS3
- Image Panning on Mouse Move – Actionscript 3 – Flash CS3
- XML Image Gallery – Actionscript 3, Flash CS3, Tweener
- XML based image gallery – Actionscript 3, Flash CS3, Tweener
- Scrollbar with easing – Actionscript 3 – Tweener – Flash CS3
- 3D Carousel XML based – Actionscript 3, Flash CS3
- Papervision3D Spiral Carousel
- Depth of Field with Papervision3D & Tweener
- @Sulaiman, you can do it by removing every child inside the movieclip, and then ...
- @william, The calendar is a movieclip. You can just move it by changing the x an...
- @fuya, unfortunately you cannot add thumbnails, neither the gallery can autoplay...
- @jck, It's not the scroller's fault. Flash has a limit on the height of textfiel...
- Hi, I just started using the scroller, but I'm having trouble with a long text, ...
- The gallery is great.
To customize, I would like to know how can I make the g...
- how do i actually move the calendar along the x and y axis. i can move the backg...
- hi Artluvr,
thanks for this. one quick question:
any idea how i could swit...
Image Galleries
- XML Based Fullscreen Image Rotator With Proportional Resize – Flash CS3 – Actionscript 3
- XML based banner rotator – Actionscript 3, Flash CS3
- XML Image Gallery – Actionscript 3, Flash CS3, Tweener
- XML based image gallery – Actionscript 3, Flash CS3, Tweener
- Auto Resize XML Image Gallery – Actionscript 3, Flash CS3, Tweener
- XML Based Zoom Gallery – Flash, Actionscript 2, FuseKit
Menus & Buttons
Utilities
- MP3 Player – XML based – Flash CS3, Actionscript 3, Tweener
- Image Panning on Mouse Move – Actionscript 3 – Flash CS3
- Scrollbar with easing – Actionscript 3 – Tweener – Flash CS3
- XML graph like Google Analytics – Actionscript 3, Flash CS3
- XML based MP3 Player Streaming Compact – Actionscript 3 – Flash CS3
- Events Calendar – XML based – Actionscript 3, Flash CS3, Tweener
- 3D Windows that rotate when you drag them – Papervision 3D 2, Actionscript 3, Flash
- XML based news bubble – Actionscript 3 – Flash – Tweener
- Magnifying glass zoom – Flash, Actionscript 2
- Interactive Snow with OOP Actionscript 2

This flash item is exactly what I was looking for! Great work guys! Keep it up!