Parse Google Calendar XML with Actionscript 3.0 the Right Way
If you ever sit down to try and parse Google calendar XML data in Actionscript (specifically AS3), you’ll find that there is a lot of misinformation on the web, including many poor, broken examples of code. I’d like to try and demystify some of the problems behind parsing Google calendar XML by showing how it is done the right way.
How to Find the URL to Some Google Calendar XML
Google does a great job of giving you direct access to the XML of any calendar that may appear on your personal calender. You even have the option of making your private calendars public, thereby getting access to your own calendar XML feed. In Google calendar, if you click Settings (Img.1), then click the first orange XML button (Img. 2), Google gives you a URL to your calendar’s XML. You must make the calendar you want to use in your AS3 project public.
Click Settings to find the Google Calendar XML URL for your AS3 project
Click the Orange XML Button
Once you have the URL to your XML, you may want to append some sorting options to your XML.
Sort Your XML Before You Use It
By default, Google adds events to your XML by the date the event was created on the calendar, not by the event’s start date or end date. This is odd but there is a quick fix. By appending a little more data to your calendar URL, you have have sorted XML. I recommend adding this to the end of your URL:
?orderby=starttime&sortorder=ascending&max-results=5
Now that you have sorted, usable XML, let’s add it to your Actionscript.
The Code
Here is a short example of how to parse your Google Calender XML in Actionscript 3.0.
var xmlLoader:URLLoader = new URLLoader(); var xml_data:XML = new XML(); xmlLoader.addEventListener(Event.COMPLETE, load_xml); xmlLoader.load(new URLRequest("http://www.google.com/calendar/feeds/0p18vi9o7tve7uokobk4irlhb4@group.calendar.google.com/public/full?orderby=starttime&max-results=5&singleevents=true&sortorder=a")); function load_xml(e:Event):void { xml_data = new XML(e.target.data); parse_xml(xml_data); } function parse_xml(xml_data:XML):void { // Number of XML / Calendar Entries var numEntries:int = xml_data.*::entry.length(); // Loop for Event Title and Summary for(var i:int=0; i<numEntries; i++) { var event_text = xml_data.*::entry[i].*::title.text().toXMLString(); var eventStartDate = xml_data.*::entry[i].*::summary.text().toXMLString(); trace(event_text); trace(eventStartDate); } }
If you have some basic knowledge of AS3 loaders, then this will not look very complicated. First, we create a new AS3 loader, which will grab our XML and load it up so we can put it to use. Once you actually deploy your flash site, you may need to use a PHP XML proxy file to spoof your sever into thinking the Google Calendar XML is local.
After we create the loader, we add an event listener that sends the data to our parse function after the data loads. Then, we’re off and running. Make sure you replace the Google URL with our own calendar URL (I have a demo in there now). You can also change which XML node data you’d like to get by the word “title” in the event_text variable with the name of another node in the XML. See below:
xml_data.*::NODE_YOU_WANT[ARRAY_INDEX_NUMBER].*:: NODE_YOU_WANT.text().toXMLString();
Hi thanks it worked fine while i was making it but as soon as i try running it on the webhost it wont work any tips?
Hi Stephen,
This is probably because your web host won’t allow you to load remote XML as a security feature. To get around this, try making a PHP XML proxy file. Then, instead of pointing your AS3 file to the XML directly, link the local PHP proxy file. Let me know if you need an example.
Yes please never done a php proxy file
Something like this works for me. Make sure you add in the link to your remote XML.
<?php
// Set your return content type
header('Content-type: application/xml');
// Website url to open
$url = "http://www.linktoyourXML.com";
// Get that website's content
$handle = fopen($url, "r");
// If there is something, read and return
if ($handle) {
while (!feof($handle)) {
$buffer = fgets($handle, 4096);
echo $buffer;
}
fclose($handle);
}
?>
Thanks that works great
No problem!
Zac,I posted the php on my site and linked it to the xml. If I open the .php on the browser it shows the xml correctly but on Flash I get a IO streaming error. Do you have any suggestions? Thanks
Hi Mas,
I think this will start working for you when you move it to a web server. When you do that, you may need to reference your php proxy file as a static link in your actionscritpt. Something like:
xmlLoader.load(new URLRequest("http://www.example.com/proxy.php"));Thanks Zac, I also noticed that I always get past events whether I choose ascending or descending order. I looked up the goog calendar api with no success.
I think what you need to do is provide a
start-minandstart-maxdate range in your URL. Check out http://code.google.com/apis/calendar/data/2.0/reference.html#Parametersfutureevents=true was the answer!!!
Thank you Zac for pointing me to the right doc.
Hey Zac!
Thanks for sorting that out. Got it working but I still have a question..
Homecome the output lists all the events correctly, but when I put the output in a textfield only one event shows up?
appendText I guess..
Hmm… Not too sure why only 1 event would show. I haven’t used a script like this in a long time… My first impressions would be to, if possible, escape quotes in the string input from the calendar. Or, you may be accidentally limiting your output to the first item in an array.
Thanks a lot for this awesome tip! I’ve been struggling quite a while on how to parse Google Calendar correctly and you sure helped me out!
I’m such a n00b in ActionScript so I have another question for you. I get some HTML line break tags when I parse the XML file. Is there a quick fix to get rid of those?
Thanks again!
There should be a way for you to remove them using regular expressions.
Hey,
This is a great summary. I’m a total baby with XML but trying to help some musician friends with their Web sites using some nice Flash templates. One thing I keep needing to do for them is their calendar updates, etc., and it would be awesome to be able to list in an easy way the info from a Google calendar. Generally, they prefer a list form for their performances, etc., like:
8.12.2011 8:00pm Britten: Peter Grimes Singing role of Peter Grimes Local Opera House, 100 Opera Street
9.10.2011 8:00pm Britten: Peter Grimes Singing role of Peter Grimes Local Opera House, 100 Opera Street
10.5.2011 8:00pm Mozart: Requiem Singing Alto solo Grace Cathedral, 100 Cathedral Street
etc.
Could I pay you to make this for me? :-) It should be a component SWF that I can load into the template.
I just found this post and was interested, I’m new to action script and xml. Ive been trying to get this to work in Flash Builder but haven’t been able to get any where with it. I am just trying to get a list of calendar events and use that to show their details. Do you have a small sample project made that I can look at the source?
[...] Zac Vineyard’s Blog – Parse Google Calendar XML with Actionscript 3.0 the Right Way. Share this:TwitterFacebookLike this:LikeBe the first to like this post. Posted in Uncategorized [...]
[...] Zac Vineyard’s Blog – Parse Google Calendar XML with Actionscript 3.0 the Right Way. Share this:TwitterFacebookLike this:LikeBe the first to like this post. [...]
Hi,
I was looking for a Calendar where I could use events and I found this nice post. Unfortunately I’m new to AS3, so I was unable to make it work. As Brandon said in a comment above, a small/demo project would be useful for a novice like me. Recently I found here:http://www.flashxml.net/calendar.html a nice calendar that fits my needs. It’s easy to use and to customize because is based on XML files, I recommend it.
Hi, I so needed this tutorial. Thank You! Do you have a Flash file I could download with this example? Thanks