Example of a custom Item Renderer for Flex Mobile App's

CalendarioView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:dao="dao.*"
		xmlns:local="*"
		xmlns:supportClasses="spark.skins.mobile.supportClasses.*"
		creationComplete="data=moduleSrv.getScheduleModules()" title="Calendário"
		top="0" bottom="0" right="0" left="0">
	<fx:Declarations>
		<dao:ModuleDAO id="moduleSrv"/>
	</fx:Declarations>	
	
	<fx:Script>
		<![CDATA[
			import mx.core.FlexGlobals;
			protected function itemClickInfo(event:MouseEvent):void
			{
				switch (event.currentTarget.label) {
					case "Sair" :
						FlexGlobals.topLevelApplication.logout();
						break;
					
				}
				
			}
		]]>
	</fx:Script>
	
	<s:List id="list" left="0" right="0" top="0" bottom="0"
			change="navigator.pushView(DetalhesAcao, list.selectedItem)" dataProvider="{data}"
			enabled="true" itemRenderer="CustomCalendarioItemRenderer">
		<!--<fx:Component>
			<local:CustomCalendarioItemRenderer>
				
			</local:CustomCalendarioItemRenderer>
			<s:IconItemRenderer
			label="{data.name}"
			messageField="area"/>
			</fx:Component>
			itemRenderer="CustomCalendarioItemRenderer">-->
	</s:List>
	<s:viewMenuItems>
		<s:ViewMenuItem label="Sair" click="itemClickInfo(event);"/>
	</s:viewMenuItems>
</s:View>

CustomCalendarItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark" buttonMode="true">
	
	<s:states>
		<s:State name="normal"/>
		<s:State name="hovered"/>
	</s:states>
	
	<fx:Script>
		<![CDATA[
			private function getMonth(_date:String):String
			{
				var __date:Array = _date.split('-');
				switch(__date[1])
				{
					case "01":
					{
						return "JAN";	
						break;
					}
					case "02":
					{
						return "FEV";	
						break;
					}
					case "03":
					{
						return "MAR";	
						break;
					}
					case "04":
					{
						return "ABR";	
						break;
					}
					case "05":
					{
						return "MAI";	
						break;
					}
					case "06":
					{
						return "JUN";	
						break;
					}
					case "07":
					{
						return "JUL";	
						break;
					}
					case "08":
					{
						return "AGO";	
						break;
					}
					case "09":
					{
						return "SET";	
						break;
					}
					case "10":
					{
						return "OUT";	
						break;
					}
					case "11":
					{
						return "NOV";	
						break;
					}
					case "12":
					{
						return "DEZ";	
						break;
					}
				}
				return "";
			}
			private function getDay(_date:String):String
			{
				var __date:Array = _date.split('-');
				return __date[0];
			}
		]]>
	</fx:Script>
	<s:Rect width="{monthDisplay.width}" height="{monthDisplay.height}"
			x="{monthDisplay.x+1}" y="{monthDisplay.y-3}">
		<s:fill>
			<s:SolidColor color="#e94d00" />
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke color="#000000" weight="1"/>
		</s:stroke>
	</s:Rect>
	<s:Rect width="{monthDisplay.width}" height="{monthDisplay.height}"
			x="{monthDisplay.x+1}" y="{monthDisplay.y+monthDisplay.height-3}">
		<s:fill>
			<s:SolidColor color="#FFFFFF"/>
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke color="#000000" weight="1"/>
		</s:stroke>
	</s:Rect>
	<s:HGroup width.normal="100%">
		
		<s:VGroup id="vGroupMonthDisplay"
				  height.normal="100%" gap.normal="0" horizontalAlign.normal="center"
				  paddingBottom.normal="10" paddingLeft.normal="10" paddingRight.normal="10"
				  paddingTop.normal="10" requestedRowCount.normal="2" textAlign.normal="center"
				  verticalAlign.normal="middle">
			<s:Label id="monthDisplay" color="#FFFFFF" fontSize="24" fontWeight="bold"
					 paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"
					 text="{getMonth(data.initial_date)}"
					 textAlign.hovered="center" verticalAlign.hovered="middle"
					 width.normal="80" height.normal="40" verticalAlign.normal="middle"/>
			
			<s:Label id="dayDisplay" color="#000000" fontSize="24" fontWeight="bold"
					 paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"
					 text="{getDay(data.initial_date)}" verticalAlign="middle"
					 textAlign.hovered="center"
					 width.normal="80" height.normal="40"/>
		</s:VGroup>
		<s:VGroup gap="20" paddingBottom="10" paddingTop="10"
				  gap.normal="5" paddingBottom.normal="15" paddingLeft.normal="15"
				  paddingRight.normal="15" paddingTop.normal="15">
			<s:HGroup>
				<s:Label left="0" right="0" top="0" bottom="0" text="Módulo: " verticalCenter="0"
						 color.normal="#000000" fontSize.normal="28" fontWeight.normal="bold"/>
				<s:Label left="0" right="0" top="0" bottom="0"
						 text="{data.name}" verticalCenter="0"
						 color.normal="#000000" fontSize.normal="28"/>
			</s:HGroup>
			<s:HGroup>
				<s:Label left="0" right="0" top="0" bottom="0" text="Curso: " verticalCenter="0"
						 color.normal="#F0F0F0" fontSize.normal="24" fontWeight.normal="bold"/>
				<s:Label left="0" right="0" top="0" bottom="0" text="{data.course.name}"
						 verticalCenter="0"
						 color.normal="#F0F0F0" fontSize.normal="24"/>
			</s:HGroup>
			<s:HGroup gap.normal="2">
				<s:Label left="0" right="0" top="0" bottom="0" text="Início: " verticalCenter="0"
						 color.normal="#F0F0F0" fontSize.normal="24" fontWeight.normal="bold"/>
				<s:Label left="0" right="0" top="0" bottom="0" text="{data.initial_date}"
						 verticalCenter="0"
						 color.normal="#F0F0F0" fontSize.normal="24"/>
				<s:Label left="0" right="0" top="0" bottom="0"
						 text=" às {data.start_time} até {data.end_time}" verticalCenter="0"
						 color.normal="#F0F0F0" fontSize.normal="24" fontWeight.normal="normal"/>
			</s:HGroup>
		</s:VGroup>
	</s:HGroup>
	
</s:ItemRenderer>