Published at: 08:01 pm - Wednesday January 21 2009
At work I recently had a need to create a monthly calendar within Flex and populated with data from a web-service (created in PHP). I hate reinventing the wheel, but I also hate wasting time searching for a solution to a simple enough problem. So below you can find a quick answer to the problem as I couldn’t find one myself.
PHP: The following code creates a simple XML feed.
<?php
/**
* Create a XML calendar for a given year & month
*
* Noah Massey & Matthew Metnetsky
*/
function calendar_xml($doc, $year, $month)
{
if (!$doc) throw new Exception('doc is bad');
if (!$month) throw new Exception('month is bad');
if (!$year) throw new Exception('year is bad');
$numDays = date('t', mktime(0, 0, 0, $month, 1, $year));
$monthNode = $doc->appendChild($doc->createElement('month'));
$day = 1 - date('w', mktime(0, 0, 0, $month, 1, $year));
do {
$weekNode = $monthNode->appendChild($doc->createElement('week'));
for ($y=0;$y<7 and $day <= $numDays; $day++,$y++) {
//$sunday = ($day == $y);
//$sunday = ($day == ($y + 6));
$dayNode = $weekNode->appendChild($doc->createElement('day'));
$numAttr = $doc->createAttribute('num');
$numAttr->appendChild($doc->createTextNode($day));
$dayNode->appendChild($numAttr);
/*
* we could loop through database records here for holidays etc
* the _real_ version uses mktime(0, 0, 0, $month, $day, $year)
* to check for a stamp within an array of holiday records
* and then tack on some more nodes to $dayNode
*/
}
} while ($day <= $numDays);
}
$doc = new DOMDocument('1.0', 'UTF-8');
$doc->formatOutput = true;
$date = getdate();
$year = (int) (array_key_exists('year', $_GET))? $_GET['year'] : $date['year'];
$month = (int) (array_key_exists('month', $_GET))? $_GET['month'] : $date['mon'];
calendar_xml($doc, $year, $month);
header('Content-Type: application/xml', true);
echo($doc->saveXML());
?>
If you look at the rather large comment block above you can see where the value comes in. It’s pretty simple to use a unix timestamp to find records which you actually would want in the XML like holidays, events, etc.
The basic output looks like the following, and can be see in full at http://cowarthill.com/blog/wp-content/uploads/2009/01/calendar-xml.php
<month>
<week>
<day num="{day of month}" />
</week>
</month>
Once you have all of this in place you need to pull it into Flex. I found using a DataGrid very easy once you have the XML from the web service. And to customize the display I created a custom itemRenderer for the DataGridColumns. Here’s a few snippets….
MXML: Lets define our DataGrid and our HTTPService which will retrieve our data.
<mx:DataGrid id="dg"
sortableColumns="false"
draggableColumns="false"
selectable="false"
showScrollTips="true"
horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:columns>
<mx:DataGridColumn headerText="Sunday" itemRenderer="calendar.MonthCell" />
<mx:DataGridColumn headerText="Monday" itemRenderer="calendar.MonthCell" />
<mx:DataGridColumn headerText="Tuesday" itemRenderer="calendar.MonthCell" />
<mx:DataGridColumn headerText="Wednesday" itemRenderer="calendar.MonthCell" />
<mx:DataGridColumn headerText="Thursday" itemRenderer="calendar.MonthCell" />
<mx:DataGridColumn headerText="Friday" itemRenderer="calendar.MonthCell" />
<mx:DataGridColumn headerText="Saturday" itemRenderer="calendar.MonthCell" />
</mx:columns>
</mx:DataGrid>
<mx:HTTPService id="calHS"
url="http://localhost/project/calendar-xml.php"
method="GET"
result="handleCalXML(event);"
fault="Alert.show('Failed to retrieve XML from server');"
resultFormat="e4x"
contentType="application/xml"/>
AS3: Now we need at least two functions: 1 to call the service and retrieve the XML; and a second take the response and assign it to the DataGrid.
/* month should be 1-based (January) */
public function retrieveCalendar():void
{
calHS.url = 'http://localhost/project/calendar-xml.php?year=' + year + '&month=' + month;
calHS.send();
}
/* handle the results from from calendar-xml.php */
private function handleCalXML(event:ResultEvent):void
{
var weeks:XMLList = event.result.week as XMLList;
/* dg is defined above in the MXML */
this.dg.dataProvider = dayInfo;
this.dg.rowCount = weeks.length(); // grid show be no bigger than necessary
}
Now we’re going to create a reusable itemRenderer which is instantiated for each cell in the DataGrid. You can do this in MXML directly, but I like AS3. The most important function to focus on is the setter for data because it assigns the values based on the XML we received.
package calendar
{
import mx.collections.XMLListCollection;
import mx.controls.TextArea;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.IDataRenderer;
import mx.events.FlexEvent;
public class MonthCell extends TextArea
implements IDataRenderer, IDropInListItemRenderer, IListItemRenderer
{
private var _week:XMLListCollection = null;
private var _day:XML = null;
private var _listData:BaseListData;
public function MonthCell()
{
super();
this.editable = false;
this.wordWrap = true;
this.selectable = false;
}
[Bindable(FlexEvent.DATA_CHANGE)]
public override function get listData():BaseListData
{
return this._listData;
}
public override function set listData(ldata:BaseListData):void
{
if (this._listData != ldata) {
this._listData = ldata;
this.dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
}
}
[Bindable(FlexEvent.DATA_CHANGE)]
public override function get data():Object
{
return this._week;
}
public override function set data(value:Object):void
{
var xml:XML = value as XML;
if (xml) {
// convert XML to a list for extra methods
this._week = new XMLListCollection(xml.children());
// make sure we've got enough records in week
// to be able to get the current day
if (this._week.length > this.listData.columnIndex) {
this._day = this._week.getItemAt(this.listData.columnIndex) as XML;
} else {
this._day = null; // clear in-case we're reused
}
}
// do we have a valid day XML object
if (this._week == null || this._day == null || int(this._day.@num) < 1) {
this.htmlText = "";
} else {
/* lets display the day of the month in the cell */
this.htmlText = "<p><b>" + this._day.@num + "</b></p>";
}
this.invalidateProperties();
this.dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
}
}
}
