RIAfreaks

Flex Scheduling Framework is a really cool tool that can be use for creating applications with calendar. Unfortunately, the framework does not work with Flex 4.0 framework. How can you fix that?

First of all, you have to download FSF from Adobe Labs. Instead of using swx binary, we will need source code located in src directory. I drag’n'dropped flexlib directory into src folder of my project. I had to modify three files: DottedVerticalLineRenderer.as, DottedHorizontalLineRenderer.as and LineRenderer.as from flexlib.scheduling.scheduleClasses.lineRenderer package. Inside all of those three classes I added a new get method for scaleMode():

		public function get scaleMode() : String
		{
			return this.scaleMode;
		}

I also added draw() method for all classes. For both Dotted*LineRenderer classes it was:

		public function draw(g:Graphics, rc:Rectangle) : void
		{
			GraphicUtils.drawDottedHorizontalLineTo(g, rc.y, rc.x, rc.x + rc.width);
			GraphicUtils.drawDottedHorizontalLineTo(g, rc.y + rc.height, rc.x, rc.x + rc.width);
			GraphicUtils.drawDottedVerticalLineTo(g, rc.x, rc.y, rc.y + rc.height);
			GraphicUtils.drawDottedVerticalLineTo(g, rc.x + rc.width, rc.y, rc.y + rc.height);
		}

for LineRenderer:

		public function draw(g:Graphics, rc:Rectangle) : void
		{
			g.moveTo(rc.x, rc.y);
			g.lineTo(rc.x + rc.width, rc.y);
			g.lineTo(rc.x + rc.width, rc.y + rc.height);
			g.lineTo(rc.x, rc.y + rc.height);
			g.lineTo(rc.x, rc.y);
		}

With those methods Flex Scheduling Framework becomes fully available. I slightly modified the most sophisticated example from Adobe Labs to Flex 4.0 AIR application:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:flexlib="http://code.google.com/p/flexlib/" xmlns:scheduling="flexlib.scheduling.*" creationComplete="onCreationComplete();">
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
  <fx:Script>
      <![CDATA[
         import flexlib.scheduling.samples.ScheduleData; // was   import com.adobe.ac.scheduling.samples.ScheduleData;
         import flexlib.scheduling.scheduleClasses.SimpleScheduleEntry; // was import com.adobe.ac.controls.scheduleClasses.SimpleScheduleEntry;
         import flexlib.scheduling.scheduleClasses.BackgroundItem; // was import com.adobe.ac.controls.scheduleClasses.BackgroundItem;
         import flexlib.scheduling.util.DateUtil; //was import com.adobe.ac.util.DateUtil;
         import flexlib.scheduling.scheduleClasses.LayoutScrollEvent; // was import com.adobe.ac.controls.scheduleClasses.LayoutUpdateEvent;
         import mx.collections.IList;
         import mx.collections.ArrayCollection;
         import mx.controls.Alert;
         import mx.events.ScrollEvent;
         import mx.events.ScrollEventDirection;         

         [Bindable]
         private var dataProvider : IList;
         [Bindable]
         private var rowDataProvider : IList;
         [Bindable]
         private var startDate : Date;
         [Bindable]
         private var endDate : Date;
         [Bindable]
         private var zoom : Number;
         [Bindable]
         private var scheduleViewerWidth : Number = 600;
         [Bindable]
         private var scheduleViewerHeight : Number = 400;

         private function onCreationComplete() : void
         {
            setTimeframe();
            initDataProvider();
            initBackgroundColors();
            zoom = 250;
         }

         private function setTimeframe() : void
         {
            startDate = DateUtil.clearTime( new Date() );
            endDate = getEndDate( startDate );
         }

         private function getEndDate( startDate : Date ) : Date
         {
            var duration : Number = DateUtil.DAY_IN_MILLISECONDS * 1;
            var endDate : Date = new Date( startDate.getTime() + duration );
            return endDate;
         }

         private function initDataProvider() : void
         {
            dataProvider = new ScheduleData().createRowsOfSequentialColoredEntries( 150, 15 );
            rowDataProvider = new ArrayCollection();
            for( var i : int = 0; i <dataProvider.length; i++ )
            {
               rowDataProvider.addItem( { label: "Row " + ( i + 1 ) } );
            }
         }

         private function onZoom( value : Number ) : void
         {
            zoom = value;
         }

         private function onScrollTimeline( position : Number ) : void
         {
            scheduleViewer.xPosition = position;
         }

         private function onScrollScheduleViewer( event : ScrollEvent ) : void
         {
            if( event.direction == ScrollEventDirection.HORIZONTAL )
            {
               timeline.xPosition = event.position;
            }
         }

         private function scrollList( event : LayoutScrollEvent ) : void
         {
            if( event.direction == ScrollEventDirection.VERTICAL )
            {
               rowsList.verticalScrollPosition = event.position;
            }
         }         

         private function gotoNow() : void
         {
            var time : Date = new Date();
            scheduleViewer.moveToTime( time.getTime() - startDate.getTime() );
         }

         private function gotoSelectedEntry() : void
         {
            if( scheduleViewer.selectedItem != null )
            {
               scheduleViewer.moveToEntry( scheduleViewer.selectedItem );
            }
            else
            {
               warnAboutNoSelection();
            }
         }

         private function warnAboutNoSelection() : void
         {
            Alert.show( "Please select an entry." );
         }

         private function initBackgroundColors() : void
         {
            var result : ArrayCollection = new ArrayCollection();

            var duration : Number = endDate.getTime() - startDate.getTime();
            var days : Number = duration / DateUtil.DAY_IN_MILLISECONDS;

            for( var i : int; i <days; i++ )
            {
               var currentDate : Number = DateUtil.DAY_IN_MILLISECONDS * i;
               var backgroundItem : BackgroundItem;
               backgroundItem = createBackgroundItem( "office closed", 0xD5D4D0,
                                                   currentDate, 0, 0, 24, 0 );
               result.addItem( backgroundItem );

               backgroundItem = createBackgroundItem( "generell office hours", 0xFFFFFF,
                                                      currentDate, 9, 0, 17, 0 );
               result.addItem( backgroundItem );

               backgroundItem = createBackgroundItem( "lunchtime", 0xEEEDE9,
                                                      currentDate, 12, 0, 13, 0 );
               result.addItem( backgroundItem );
            }
            scheduleViewer.backgroundItems = result;
         }

         private function createBackgroundItem( description : String,
                                                color : Number, currentDate : Number,
                                                startHours : Number, startMinutes : Number,
                                                endHours : Number, endMinutes : Number ) : BackgroundItem
         {
            var backgroundItem : BackgroundItem = new BackgroundItem();
            backgroundItem.description = description;
            backgroundItem.color = color;
            backgroundItem.startDate = new Date( currentDate + createTime( startHours, startMinutes ) );
            backgroundItem.endDate = new Date( currentDate + createTime( endHours, endMinutes ) );
            return backgroundItem;
         }

         private function createTime( hours : Number, minutes : Number ) : Number
         {
            var result : Number = (( hours * 60 ) + minutes ) * 60 * 1000;
            return result;
         }
      ]]>
   </fx:Script>

   <mx:VBox verticalGap="0">
      <mx:VBox height="{ timeline.height }" verticalGap="0">
         <mx:Label text="Rows"/>
      </mx:VBox>
      <mx:List
         id="rowsList" width="60" height="{ scheduleViewerHeight }"
         dataProvider="{ rowDataProvider }"
         rowHeight="{ scheduleViewer.rowHeight }"
         verticalScrollPolicy="off"/>
   </mx:VBox>

   <mx:VBox verticalGap="0">
      <scheduling:Timeline
         id="timeline"
         width="{ scheduleViewerWidth }" borderStyle="none"
         startDate="{ startDate }" endDate="{ endDate }"
         zoom="{ zoom }"
         scroll="onScrollTimeline( event.position );"
         />

      <scheduling:ScheduleViewer
         dottedGridLines="true"  // new
         horizontalGridLineColor="#000000" // new
         verticalGridLineColor="#000000" // new
         horizontalGridLineAlpha="100"  // new
         horizontalGridLineThickness="1"  // new
         verticalGridLineThickness="1" // new
         verticalGridLineAlpha="100" // new
         id="scheduleViewer"
         width="{ scheduleViewerWidth }" height="{ scheduleViewerHeight }" borderStyle="none"
         dataProvider="{ dataProvider }"
         startDate="{ startDate }" endDate="{ endDate }"
         zoom="{ zoom }"
         horizontalScrollPolicy="off"
         entryRenderer="flexlib.scheduling.scheduleClasses.renderers.ColoredGradientScheduleEntryRenderer"
         entryLayout="flexlib.scheduling.scheduleClasses.layout.SimpleLayout"
         pixelScroll="onScrollScheduleViewer( event );" itemScroll="scrollList( event )"
         />
      <mx:HBox width="{ scheduleViewerWidth }" paddingTop="6">
         <mx:Label text="Goto:"/>
         <mx:Button label="Now" click="gotoNow();"/>
         <mx:Button label="Selected" click="gotoSelectedEntry();"/>
         <mx:Spacer width="100%"/>
         <mx:Label text="Zoom:"/>
         <mx:HSlider
            id="zoomSlider"
            minimum="0" maximum="1000" value="{ zoom }"
            snapInterval="1" liveDragging="true"
            change="onZoom( zoomSlider.value );" />
      </mx:HBox>
   </mx:VBox>
</s:WindowedApplication>