Adding Calendar Event Entries to the Flex DateChooser Component

December 16, 2008 03:03 by author

I have been experimenting with the DateChooser component in order to use it as a simple event calendar. It is fairly difficult to override the CalendarLayout methods, so I decided to approach the problem by simply iterating through the DateChooser's children and modifying the htmlText property for each UITextField that matches an event date.

The date Collection has properties for the event's date, label and return value and should be fairly simple to populate from a database or XML file:

public var dateCollection:ArrayCollection = new ArrayCollection([

{ date:"12/4/2008", data:"party value", label:"Party"},

{ date:"1/5/2009", data:"meeting value", label:"Meeting"},

{ date:"12/15/2008", data:"holiday value", label:"Holiday"},

{ date:"12/15/2008", data:"dinner value", label:"Dinner"},

{ date:"12/15/2008", data:"bedtime value", label:"Bedtime"}

]);

Right now I only have a few random date entries for December 2008 and January 2009, so you may need to navigate to those months to see anything.

This allows me to add links with HREF set to "event:returnvalue" so that the application can be allowed to respond to clicking on any particular date:

dayHTML += "<br><A href='event:" + eventArray[k].data + "' TARGET=''>" + eventArray[k].label + "</A>";

Currently, it seems to take at least one click to set the focus on the DateChooser - so you may have to click the first entry twice to fire the TextEvent.LINK event.

This is an early concept, but it seems to work pretty well right now and my hopes are that someone might be able to use this as a starting point for building their own simple event calendars. Flash Enabled Blog also has a great post pointing to other excellent calendar solutions for Flex.

You can view the source for the application here: ExtendedDateChooser

I tried to get this to work with httpService call. Managed to pass without error but the importing doesn't seem to be working. Any takers?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="absolute"
        creationComplete="eventList.send(),init()"
        width="400"
        height="500"
>

  <mx:HTTPService id="eventList"
          url="data.xml"
          useProxy="false"
          showBusyCursor="true"
          result="readCollection(event)"/>

  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.events.DateChooserEvent;
      import mx.events.CalendarLayoutChangeEvent;
      import mx.core.UITextField;
      import mx.controls.Alert;
      import mx.rpc.events.ResultEvent;
      import mx.utils.ArrayUtil;
      import mx.utils.ObjectProxy;

      import mx.controls.CalendarLayout;
      use namespace mx_internal;
      // collection to hold date, data and label
      [Bindable]
      public var dateCollection:ArrayCollection=new ArrayCollection();

      private function readCollection(event:ResultEvent):void
      {
        //if date value exists add to ArrayCollection dateCollection
        if (event.result.rss.channel)
        {
          //items must be added to an Array Collection using 'addItem' or 'addItemAt' methods
          dateCollection.addItem(event.result.rss.channel);
        }
        //
        else if (event.result.rss.channel is ObjectProxy)
        {
          dateCollection.addItem(new ArrayCollection(ArrayUtil.toArray(event.result.rss.channel)));
        }

      }

      private function init():void
      {

        this.addEventListener(TextEvent.LINK, linkHandler);
      }

      private function events():void
      {
        for (var i:uint=0; i < mycal.numChildren; i++)
        {
          var calendarObj:Object=mycal.getChildAt(i);
          if (calendarObj.hasOwnProperty("className"))
          {
            if (calendarObj.className == "CalendarLayout")
            {
              trace("cal");
              var cal:CalendarLayout=CalendarLayout(calendarObj);

              for (var j:uint=0; j < cal.numChildren; j++)
              {
                var dateLabel:Object=cal.getChildAt(j);
                if (dateLabel.hasOwnProperty("text"))
                {
                  trace(dateLabel.text);
                  var day:UITextField=UITextField(dateLabel);
                  var dayHTML:String=day.text;
                  day.selectable=true;
                  day.wordWrap=true;
                  day.multiline=true;
                  //day.border = true;
                  //TODO: UITextField has no style for border, and the UITextField.border property is not really very useful
                  day.styleName="EventLabel";

                  //TODO: This passes all kinds of crazy dates to the helper like 11/S/2008 - but still works...check dateLabel.text == Number?
                  //Make sure to add one to month since it is zero based - TODO: make month builder function:String?
                  var eventArray:Array=dateHelper((mycal.displayedMonth + 1) + "/" + dateLabel.text + "/" + mycal.displayedYear);
                  if (eventArray.length > 0)
                  {

                    for (var k:uint=0; k < eventArray.length; k++)
                    {
                      dayHTML+="<br><A HREF='Event:" + eventArray[k].data + "' TARGET=''>" + eventArray[k].label + "</A>";
                    }
                    day.htmlText=dayHTML;
                  }
                }
              }
            }
          }
        }
      }

      private function linkHandler(event:TextEvent):void
      {
        Alert.show("Event: " + event.text);
      }

      private function dateHelper(renderedDate:String):Array
      {
        var result:Array=new Array();
        for (var i:uint=0; i < dateCollection.length; i++)
        {
          if (dateCollection[i].date == renderedDate)
          {
            result.push(dateCollection[i]);
          }
        }
        return result;
      }
    ]]>
  </mx:Script>
  <mx:DateChooser id="mycal"
          creationComplete="events()"
          updateComplete="events()"
          right="5"
          left="5"
          bottom="5"
          top="5"/>
</mx:Application>

<!-- END FLEX CODE --!>

and data.xml looks like this:

<?xml version="1.0" encoding="utf-8"?>
<rss>
<channel>
<date>8/22/2009</date>
<data>This is  a test</data>
<label>Stephens Test</label>
<date>8/23/2009</date>
<data>This is  a test</data>
<label>Stephens Test</label>
</channel>
</rss>

Thoughts?

May 2. 2009 23:35

Kevin,
I was looking for something like this months ago and could not file anything. I do not know how I missed this. This is just what I needed and could not figure out how to do. Good work.
Thanks

Rick

June 26. 2009 22:01

it's possible to set for each dayHTML a background color?

Thanks
Alex

alex

June 30. 2009 21:28

Unfortunately, no. This looks for UITextFields in the DateChooser, but the UITextField does not have a background color style property available. livedocs.adobe.com/.../UITextField.html

July 4. 2009 07:22

Thanks a lot.. great post

Jack

August 2. 2009 04:36

Stephen

August 2. 2009 22:09

Hi Stephen - try this. Notice that I also changed the data.xml file.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="absolute"
        initialize="eventList.send();"
        creationComplete="init();"
        width="400"
        height="500" >

  <mx:Script>
    <![CDATA[
      import mx.containers.Canvas;
      import mx.collections.ArrayCollection;
      import mx.events.DateChooserEvent;
      import mx.events.CalendarLayoutChangeEvent;
      import mx.core.UITextField;
      import mx.controls.Alert;
      import mx.rpc.events.ResultEvent;
      import mx.rpc.events.FaultEvent;
      import mx.utils.ArrayUtil;
      import mx.utils.ObjectProxy;
      import mx.controls.CalendarLayout;
      use namespace mx_internal;
      // collection to hold date, data and label
      [Bindable]
      public var dateCollection:XMLList = new XMLList();

      private function readCollection(event:ResultEvent):void
      {
        dateCollection = event.result.calendarevent;
      }
      private function readFaultHandler(event:FaultEvent):void
      {
          Alert.show(event.fault.message, "Could not load data");
      }

      private function init():void
      {
        this.addEventListener(TextEvent.LINK, linkHandler);
      }

      private function events():void
      {
        if (dateCollection.length() > 0)
        {
         for (var i:uint=0; i < mycal.numChildren; i++)
         {
          var calendarObj:Object=mycal.getChildAt(i);
          if (calendarObj.hasOwnProperty("className"))
          {
            if (calendarObj.className == "CalendarLayout")
            {
              var cal:CalendarLayout=CalendarLayout(calendarObj);

              for (var j:uint=0; j < cal.numChildren; j++)
              {
                var dateLabel:Object=cal.getChildAt(j);
                if (dateLabel.hasOwnProperty("text"))
                {
                  var day:UITextField=UITextField(dateLabel);
                  var dayHTML:String=day.text;
                  day.selectable=true;
                  day.wordWrap=true;
                  day.multiline=true;
                  day.styleName="EventLabel";
                  var eventArray:Array=dateHelper((mycal.displayedMonth + 1) + "/" + dateLabel.text + "/" + mycal.displayedYear);
                  if (eventArray.length > 0)
                  {
                    for (var k:uint=0; k < eventArray.length; k++)
                    {
                      dayHTML+="<br><A HREF='Event:" + eventArray[k].data + "' TARGET=''>" + eventArray[k].label + "</A>";
                    }
                    day.htmlText=dayHTML;
                  }
                }
              }
            }
          }
         }
       }
      }

      private function linkHandler(event:TextEvent):void
      {
        Alert.show("Event: " + event.text);
      }

      private function dateHelper(renderedDate:String):Array
      {
        var result:Array=new Array();
        for (var i:uint=0; i < dateCollection.length(); i++)
        {
          if (dateCollection[i].date == renderedDate)
          {
            result.push(dateCollection[i]);
          }
        }
        return result;
      }
    ]]>
  </mx:Script>
  <mx:HTTPService id="eventList"
          url="data.xml"
          resultFormat="e4x"
          result="readCollection(event);"
          fault="readFaultHandler(event);"/>

  <mx:DateChooser id="mycal"
          creationComplete="events();"
          updateComplete="events();"
          right="5"
          left="5"
          bottom="5"
          top="5"/>
</mx:Application>


data.xml

<?xml version="1.0" encoding="utf-8"?>
<rss>
<calendarevent>
<date>8/22/2009</date>
<data>This is  a test 1</data>
<label>Stephens Test 1</label>
</calendarevent>
<calendarevent>
<date>8/23/2009</date>
<data>This is  a test 2</data>
<label>Stephens Test 2</label>
</calendarevent>
</rss>

August 3. 2009 01:34

WOW, Thanks Kevin! That approach makes more sense (eg: XMLList and FaultEvent) and worked like a charm. Now I should be able to connect this to a database without any problems :) Weeeee you are a Jedi.

Cheers!

August 5. 2009 10:54

So I successfully connected this to a mysql database with PHP complete with an administration for adding/editing and deleting entries. However, there are a couple of bugs.

1. On the server when the data loads it doesn't first initialize event though the code is there at the top of the app. You have to move forward or backwards a month before the data loads into the calendar?

2. I'm using a datefield selector in the administration for posting the date. For example it will post 08/31/2009 but mycal wont read it when it has the 0 in front of the 8. That's weird. I have to go into the admin and remove the 0 before it will show. Could this be a Flex bug?

BTW - The PHP which will convert the database to xml perfectly for this is:

<?PHP
ini_set('display_errors', "1");
ini_set('error_reporting', E_ALL ^ E_NOTICE);
header("Content-type: text/xml");

$host = "localhost";
$user = "user";
$pass = "password";
$database = "database";

$linkID = mysql_connect($host, $user, $pass) or die("Could not connect to host.");
mysql_select_db($database, $linkID) or die("Could not find database.");

$search = escapeshellcmd($_GET['search']);

$query = "SELECT * FROM table WHERE label LIKE \"%$search%\" OR data LIKE \"%$search%\" ORDER BY id_ DESC";
$resultID = mysql_query($query, $linkID) or die("No Results Found.");

$xml_output = "<?xml version='1.0' encoding='utf-8'?>\n";
$xml_output .= "<rss>\n";
for($x = 0 ; $x < mysql_num_rows($resultID) ; $x++){
    $row = mysql_fetch_assoc($resultID);
    $xml_output .= "\t<calendarevent>\n";
        $row['text'] = str_replace("&", "&", $row['text']);
        $row['text'] = str_replace("<", "<", $row['text']);
        $row['text'] = str_replace(">", ">", $row['text']);
        $row['text'] = str_replace("\"", """, $row['text']);
    $xml_output .= "\t\t<id_>" . $row['id_'] . "</id_>\n";
    $xml_output .= "\t\t<date>" . $row['date'] . "</date>\n";
  $xml_output .= "\t\t<data>" . $row['data'] . "</data>\n";
  $xml_output .= "\t\t<label>" . $row['label'] . "</label>\n";
    $xml_output .= "\t</calendarevent>\n";
}

$xml_output .= "</rss>";

echo $xml_output;

?>

August 5. 2009 17:19

Yeah, I struggled with that too so I moved the call to the HTTPService to the application's initialize event to buy a little more time. While that seemed to solve it when reading a tiny XML file, there needs to be a way to render the DateChooser after the HTTPService's ResultEvent is fired so that we can be fairly sure there is data in the XMLList... I had painted myself into a corner with the way it was coded. I found a version I did a while back where I moved everything to a custom class. This makes it easier to add the DateChooser to the canvas after the data is loaded. The trick is you will need to manually enter the width (or percentWidth), height (or percentHeight), x and y. I still need to work on getting the date to do something on the first click instead of the second but I am hoping this might be helpful to you anyways: www.kevinbrammer.com/.../ExtendedDateChooser.zip

October 30. 2009 08:42

Hi im john i am a starter in flex apps. I jus now joined a company as a trainee . i want a event calendar in flex which is similar to the one above, but i could not see events in the specified date. i want a event calendar dat contains a text input under each date so dat values can b entered and the same should ne stored in database too. so please send me the mxml code for the event calendar as soon as possible.

regards,
john

John

November 12. 2009 08:21

Great post... although Iv been working with the source and noticed that if you try using the change event to use the usual function of the date chooser a manipulated day returns the incorrect date, this has got me pickled any ideas?

All the best,

Mike

Mike

Adding Calendar Event Entries to the Flex DateChooser Component

About

Category list