Flex DateChooser – Background color for SMTWTFS header

Here is the second approach to solving the problem I descibed in this post:

Or continue into the blog entry to see the source:

Here is the app code:

Here is the code for the custom component:

<?xml version="1.0" encoding="utf-8"?>
<mx:DateChooser xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
import mx.core.UITextField;
use namespace mx_internal;
private function onCreationComplete():void{
//super.createChildren();
// note need to do this later in creation cycle to get measured properties
// so do this in creationComplete rather than createChildren
var first:UITextField = mx_internal::dateGrid.dayBlocksArray[0][0] as UITextField;
// note fudge factors below to account for padding
// actual values may be able to get from various padding styles using getStyle
var ht:int=first.measuredHeight + 6;
var wdth:int=this.measuredWidth – 4;
var ypos:int=mx_internal::dateGrid.y + 2;
var bar:Sprite = new Sprite();
bar.graphics.beginFill(0xDDDDDD);
//note starting drawing at x = 2 instead of 0
bar.graphics.drawRect(2,ypos,wdth,ht);
// set alpa of dateGrid so background shows through.
mx_internal::dateGrid.alpha=.5;
//add background at same pos as dateGrid (so that it appears at proper z-order)
this.addChildAt(bar,this.getChildIndex(mx_internal::dateGrid));
}
]]>
</mx:Script>
</mx:DateChooser>

Flex DateChooser – Background color for SMTWTFS header – solution 2