Last couple of weeks I have been coding a lot of Flex, specifically ScheduleViewer component included in flexlib version 1.9. I was mostly happy with ScheduleViewer component but I did have some minor annoyances. Actually, it was more curiosity than need that drove me to investigate the possibility of creating a custom entry renderer for ScheduleViewer component. As it turns out, it was very easy. Investigating the source code of the library, I noticed the component AbstracSolidScheduleEntryRenderer. This component was responsible for simple entry rendering, which I wanted to modify. Specifically, I wanted to modify the content of each schedule entry i.e. the date object was simply formatted as time rather than a date. Because of the fact that my schedule was really date related (rather than time related), I needed a renderer that would meet my needs. Let's look at the code of MyEntryRenderer.mxml:

<?xml version="1.0" encoding="utf-8"?>
<renderers:AbstractSolidScheduleEntryRenderer 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:renderers="flexlib.scheduling.scheduleClasses.renderers.*" 
    paddingTop="0" 
    paddingLeft="0">
        
    <mx:Script>
        <![CDATA[
            import mx.formatters.DateFormatter;
            import flexlib.scheduling.scheduleClasses.IScheduleEntry;
            
            private var formatter:DateFormatter;
            
            override public function onPreinitialize() : void
            {
                formatter = new DateFormatter();
                formatter.formatString = "MM/DD";
            }
            
            override public function set data ( value : Object ) : void
            {
                super.data = value;
                
                entry = value as IScheduleEntry;
                var content : SimpleScheduleEntry = SimpleScheduleEntry( entry );
                
                drawTextContent(content);
            }
            
            protected function drawTextContent(content : SimpleScheduleEntry) : void
            {   
                formatter.error = "";
                
                var time : String = formatter.format( content.startDate ) 
                 + " - " + formatter.format( content.endDate );
                
                toolTip = time + "\n" + content.label;
                contentLabel.text = time;
                contentLabel.styleName = getStyle( "timeStyleName" );
                contentText.text = content.label;       
            }
        ]]>
    </mx:Script>
    
    <mx:Label id="contentLabel" />
    <mx:Text id="contentText" />
    
</renderers:AbstractSolidScheduleEntryRenderer>

From the code above it is clear that we are simply customizing existing component to meet our needs. Similar to any custom components in Flex, we are simply modifying the content of an existing component by using DateFormatter object. The function DrawTextContent is responsible to set the content of the text box and a label found on AbstractSolidScheduleEntryRenderer. This function is called by setter function of the data member of the AbstractSolidScheduleEntryRenderer, which is called by ScheduleViewer component during the drawing phase. Once the customization is performed, we simply have to specify that we want to use the new renderer in following way:

<ns1:ScheduleViewer
    id="MyScheduleViewer" 
    width="800" 
    height="100%"
    rowHeight="25"
    startDate="{ StartDate }"
    endDate="{ EndDate }"
    verticalGridLineAlpha=".1"
    horizontalGridLineAlpha=".1"
    entryRenderer="MyEntryRenderer"
    entryLayout="flexlib.scheduling.scheduleClasses.layout.SimpleLayout"
    color="#FFFFFF"
    borderColor="#FFFFFF" 
    themeColor="#FFFFFF" 
    backgroundColor="#FFFFFF" 
    click="OnScheduleClick(event)" />

As we can see from the code above, all we needed to do is set entryRenderer property to be our newly defined component. One thing to note is that we do have to set entryLayout property to be "…layout.SimpleLayout", because only then the rendering is performed using AbstractSolidScheduleEntryRenderer. At this point the customization is finished.