<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" 
      xmlns:thr="http://purl.org/syndication/thread/1.0">
  <link rel="alternate" type="text/html" href="http://www.insideria.com/2009/06/calendar-component-in-actionsc.html" />
  <link rel="self" type="application/atom+xml" href="http://www.insideria.com/atom.xml" />
  <id>tag:www.insideria.com,2009://34/tag:www.insideria.com,2009://34.36219-</id>
  <updated>2009-11-16T14:56:05Z</updated>
  <title>Comments for Calendar Component in ActionScript 3 Part 1 (http://www.insideria.com/2009/06/calendar-component-in-actionsc.html)</title>
  <generator uri="http://www.sixapart.com/movabletype/">Movable Type 4.21-en</generator>
  <entry>
    <id>tag:www.insideria.com,2009://34.36219</id>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2009/06/calendar-component-in-actionsc.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://blogs.oreilly.com/cgi-bin/mt/mt-atom.cgi/weblog/blog_id=34/entry_id=36219" title="Calendar Component in ActionScript 3 Part 1" />
    <published>2009-06-08T17:00:00Z</published>
    <updated>2009-06-09T16:57:37Z</updated>
    <title>Calendar Component in ActionScript 3 Part 1</title>
    <summary> A few months ago I sat down to make a calendar component, purely as a technical exercise, but because of the way that I set up the architecture it ended up being a fairly useful and easily extended component....</summary>
    <author>
      <name>Tom Barker</name>
      
    </author>
    
    <category term="Blogs" />
    
    <content type="html" xml:lang="en" xml:base="http://www.insideria.com/">
      <![CDATA[<p>
A few months ago I sat down to make a calendar component, purely as a technical exercise, but because of the way that I set up the architecture it ended up being a fairly useful and easily extended component.  So I thought I would share the component and make it open source so anyone could take it and change it and add to it.
</p><p>
You can find the code repository <a href="http://code.google.com/p/as3calendar/">here</a>.
</p><p>
I thought I would spend some time talking about its usage, and explaining some of my design decisions.  Since I work primarily in Eclipse, I'll show screen shots and talk through how to use the project in Eclipse.
</p><p>
First, to use the component you'll need to add the project to your SVN Repository Explorer
</p><p>
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="1.gif" src="http://www.insideria.com/tbarker/calendar/1.gif" width="550" height="222" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></span>
</p><p>
and check out the latest branch.   For my example I created a new project with the latest branch and called the project AS3Calendar.
</p><p>
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="2.gif" src="http://www.insideria.com/tbarker/calendar/2.gif" width="550" height="595" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></span>
</p><p>
For my example I then created a brand new project to use the calendar component, but presumably you would be using an existing project that you want to use the calendar in.  My new project is called CalendarExample.
</p><p>
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="3.gif" src="http://www.insideria.com/tbarker/calendar/3.gif" width="476" height="282" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></span>
</p><p>
Next I right click on my CalendarExample project and click "Properties".  From the Properties window I select "ActionScript Build Path" on the left navigation.  I then click "Add Folder" and navigate to the "src" folder of the AS3Calendar project.
</p><p>
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="4.gif" src="http://www.insideria.com/tbarker/calendar/4.gif" width="550" height="524" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></span>
</p><p>
The AS3Calendar uses tween, so you'll have to add the "fl" namespace from your Flash installation to the CalendarExample project.  While the Properties window is still open for the CalendarExample project click "Add Folder" again and navigate to that directory.  In the below screen shot I show where mine is located, yours may very well be in a different location.
</p><p>
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="5.gif" src="http://www.insideria.com/tbarker/calendar/5.gif" width="550" height="416" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></span>
</p><p>
Once all that has been set up, it's time to implement.  I open up my CalendarExample.as file and import the necessary classes.  For this example we will just be using the Calendar and Day classes.
<br/>
<div class="acode" style="overflow: auto; padding: 10px;" ><div style="overflow-x: visible;">
<code language="perl">
<pre>

<span class="category1">import</span> net.tbarker.Calendar.Calendar;
<span class="category1">import</span> net.tbarker.Calendar.Day;</pre>
</code>

</div></div> 
</p><p>
Next we create an instance of the Calendar class, and two instances of the Day class.  We then add the Calendar instance to the stage.
<br />
<div class="acode" style="overflow: auto; padding: 10px;" ><div style="overflow-x: visible;">
<code language="perl">
<pre>

<span class="category1">var</span> myCal:Calendar = <span class="category1">new</span> Calendar()
<span class="category1">var</span> fDay:Day = <span class="category1">new</span> Day();
<span class="category1">var</span> bDay:Day = <span class="category1">new</span> Day();
addChild(myCal)</pre>
</code>

</div></div> 
</p><p>
From there if we want  to display a full month we can call the drawMonth function, passing in the numeric month and the two Day objects.
<br />
<div class="acode" style="overflow: auto; padding: 10px;" ><div style="overflow-x: visible;">
<code language="perl">
<pre>

myCal.drawMonth(6,fDay,bDay)</pre>
</code>

</div></div> 
</p><p>
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="6.gif" src="http://www.insideria.com/tbarker/calendar/6.gif" width="450" height="324" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></span>
</p><p>
Or if we only want to display a week we can call the drawWeek function, passing in the numeric month, the numeric day of the month, and the two Day objects.
<br />
<div class="acode" style="overflow: auto; padding: 10px;" ><div style="overflow-x: visible;">
<code language="perl">
<pre>

myCal.drawWeek(6,5,tempDay, backDay)</pre>
</code>

</div></div> 
</p><p>
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="7.gif" src="http://www.insideria.com/tbarker/calendar/7.gif" width="432" height="96" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></span>
</p><p>
Here is the full implementation for the CalendarExample.as class:

<div class="acode" style="overflow: auto; padding: 10px;" ><div style="overflow-x: visible;">
<code language="perl">
<pre>

package {
 	<span class="category1">import</span> flash.display.Sprite;
 	<span class="category1">import</span>  net.tbarker.Calendar.Calendar;
 	<span class="category1">import</span> net.tbarker.Calendar.Day;
 		
 	<span class="category1">public</span> <span class="category1">class</span> CalendarExample <span class="category1">extends</span> Sprite
 	{
  		<span class="category1">public</span> <span class="category1">function</span> CalendarExample()
  		{
   			<span class="category1">var</span> myCal:Calendar = <span class="category1">new</span> Calendar()
   			<span class="category1">var</span> fDay:Day = <span class="category1">new</span> Day();
   			<span class="category1">var</span> bDay:Day = <span class="category1">new</span> Day();
   			addChild(myCal)
   			myCal.drawMonth(6,fDay,bDay)	
   		}
  	}
}</pre>
</code>

</div></div> 
</p><p>
Next I'll be exploring the Calendar class.
</p>]]>
      
    </content>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2009://34.36219-comment:2065774</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2009://34.36219" type="text/html" href="http://www.insideria.com/2009/06/calendar-component-in-actionsc.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2009/06/calendar-component-in-actionsc.html#comment-2065774" />
    <title>Comment from kevin on 2009-06-08</title>
    <author>
        <name>kevin</name>
        <uri></uri>
    </author>
    <content type="html" xml:lang="en" xml:base="">
        <![CDATA[<p>Hi Tom,</p>

<p>Looks great and eagerly awaiting further examples.  Specifically using it for appointment/scheduling.</p>

<p>cheers</p>]]>
    </content>
    <published>2009-06-09T00:46:44Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2009://34.36219-comment:2066117</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2009://34.36219" type="text/html" href="http://www.insideria.com/2009/06/calendar-component-in-actionsc.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2009/06/calendar-component-in-actionsc.html#comment-2066117" />
    <title>Comment from Amy Blankenship on 2009-06-12</title>
    <author>
        <name>Amy Blankenship</name>
        <uri>http://flexdiary.blogspot.com</uri>
    </author>
    <content type="html" xml:lang="en" xml:base="http://flexdiary.blogspot.com">
        <![CDATA[<p>Here's an alternate approach to a similar problem you might find interesting <a href="http://flexdiary.blogspot.com/2008/09/groupingcollection-example-featuring.html">http://flexdiary.blogspot.com/2008/09/groupingcollection-example-featuring.html</a></p>]]>
    </content>
    <published>2009-06-12T19:11:18Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2009://34.36219-comment:2067719</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2009://34.36219" type="text/html" href="http://www.insideria.com/2009/06/calendar-component-in-actionsc.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2009/06/calendar-component-in-actionsc.html#comment-2067719" />
    <title>Comment from dev on 2009-07-03</title>
    <author>
        <name>dev</name>
        <uri></uri>
    </author>
    <content type="html" xml:lang="en" xml:base="">
        <![CDATA[<p>are u using flex builder? or Eclipse?</p>]]>
    </content>
    <published>2009-07-03T09:19:06Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2009://34.36219-comment:2067737</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2009://34.36219" type="text/html" href="http://www.insideria.com/2009/06/calendar-component-in-actionsc.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2009/06/calendar-component-in-actionsc.html#comment-2067737" />
    <title>Comment from Tom Barker on 2009-07-03</title>
    <author>
        <name>Tom Barker</name>
        <uri>http://www.oreillynet.com/pub/au/3751</uri>
    </author>
    <content type="html" xml:lang="en" xml:base="http://www.oreillynet.com/pub/au/3751">
        <![CDATA[<p>Eclipse - I love Eclipse despite its occasional hiccups</p>]]>
    </content>
    <published>2009-07-03T14:16:28Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2009://34.36219-comment:2138942</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2009://34.36219" type="text/html" href="http://www.insideria.com/2009/06/calendar-component-in-actionsc.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2009/06/calendar-component-in-actionsc.html#comment-2138942" />
    <title>Comment from david on 2009-10-13</title>
    <author>
        <name>david</name>
        <uri></uri>
    </author>
    <content type="html" xml:lang="en" xml:base="">
        <![CDATA[<p>the link of the class can't be download anymore. Could you share the class in somewhere?</p>]]>
    </content>
    <published>2009-10-14T01:37:08Z</published>
  </entry>

</feed
