Actionscript 3 - Written by Artluvr on Thursday, April 17, 2008 17:27 - 56 Comments

Events Calendar – XML based – Actionscript 3, Flash CS3, Tweener

VIEW DEMO

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

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Nick
Apr 17, 2008 17:35

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

Joe Walters
Apr 27, 2008 22:49

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

Artluvr
Apr 27, 2008 23:02

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
May 19, 2008 8:38

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

Artluvr
May 21, 2008 21:42

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
May 29, 2008 2:58

Nice calendar — but can you fix the days of week labels? (Wednesday doesn’t come before Tuesday)

Artluvr
May 30, 2008 9:58

rincewind, thanks for pointing out!

Spyke
Jun 27, 2008 17:48

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!

Artluvr
Jul 4, 2008 9:42

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.

Artluvr
Jul 4, 2008 9:43

Spyke, the calendar doesn’t support the functionality of showing the events of the current day when it first loads.

Destinee
Dec 8, 2008 15:58

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
Dec 8, 2008 16:26

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?

Artluvr
Dec 10, 2008 20:12

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
Jan 16, 2009 3:28

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?

Artluvr
Jan 16, 2009 7:28

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
Jan 17, 2009 0:14

Thanks for the quick response! Works like a charm!

Lisa
Jan 18, 2009 22:00

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!

Artluvr
Jan 27, 2009 7:44

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

Hans
Feb 8, 2009 18:57

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

Hans
Feb 8, 2009 19:00

Oops,

Found it in the Calendar.as

Rgrds,
Hans

Mio
Feb 18, 2009 8:55

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?

Artluvr
Feb 22, 2009 10:51

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.

JJ
Mar 5, 2009 21:07

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

Artluvr
Mar 11, 2009 8:14

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
Mar 11, 2009 10:11

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
Mar 11, 2009 16:46

Artuvr,
Is it possible to stop the animation that occurs when you click the arrow for the next month, and how?

Thanks :)

Mc
Mar 17, 2009 23:06

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

Artluvr
Mar 21, 2009 16:05

@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
Mar 24, 2009 18:18

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!

Artluvr
Mar 30, 2009 12:00

@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

Artluvr
Mar 30, 2009 12:01

@Randi, check the comment I wrote for Gail

Niko
Apr 5, 2009 22:43

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
Apr 11, 2009 8:08

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

Artluvr
Apr 18, 2009 14:29

@Niko, if you can’t see the information and date then you have to embed the fonts that you are using.

Artluvr
Apr 18, 2009 14:37

@Niko, this should be a font problem. Try embeding them.

Niko
Apr 19, 2009 20:56

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
Apr 21, 2009 13:29

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
Apr 22, 2009 20:50

oop… found it in the Fla!
works beautifully!

-jer

jer
Apr 22, 2009 20:54

another question!
Is there a way to embed links into the event text?

-jer

Roger NBH
Jun 11, 2009 22:09

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
Jun 11, 2009 23:06

Hi,

I wonder if there is a way for me to use this calendar in my Actionscript 2.0 file? Any ideas.

Thanks,

Ray

Jason
Jun 15, 2009 18:24

thanks for the prompt email, got it working great!

Emilio Munoz
Jul 8, 2009 3:34

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
Aug 6, 2009 5:35

Never mind. I figured it out. UIloader component did the trick. thanks for the good program

Romualdo
Aug 28, 2009 8:40

O, no worries… managed to sort it out… just changed all the *.embedFonts to false in the calendar.as file… sweet…

Daniel
Oct 27, 2009 20:10

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
Nov 17, 2009 20:47

Will it have the current day shown upon loading?

Gaspar
Nov 19, 2009 18:47

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
Feb 1, 2010 14:57

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.

Artluvr
Feb 6, 2010 9:11

@Gaspar You will have to embed the fonts to the file that you wish to load it into

Artluvr
Feb 6, 2010 9:12

@Jack yes it will have the current day. You will have to pass the current date to the constructor though

Artluvr
Feb 6, 2010 9:16

@Daniel, no you cannot do it from inside the flash.

Artluvr
Feb 6, 2010 9:36

@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

Artluvr
Feb 6, 2010 9:37

@jer, no you can’t at this moment

william
Feb 15, 2010 0:21

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

Artluvr
Feb 23, 2010 20:57

@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

Comment

Most Popular Content






Image Galleries


Menus & Buttons


Utilities


Freebies