Question

I created a Custom Day Render and I would like to access some custom data that I am providing with in the Flextras Calendar dataProvider.

here is the code that I have

    <flextras:Calendar
  id="calendar"
  dayRenderer="com.healthways.healthhonors.itemrenderers.MyAwesomeDayRenderer"
  monthHeaderRenderer="com.healthways.healthhonors.itemrenderers.MyAwesomeMonthRenderer"
  displayedYear="2010"
  displayedDate="1"
  displayedMonth="10"
  dateField="data"
  width="100%"
  height="100%"
  />

Here is the type of Object that I am creating and storying in an ArrayCollection witch gets passed to the Calenders dataProvider

myArrayCollection = new ArrayCollection([{date:new Date(), data:myObject}])

Here is what what my Day Render looks like

    package com.healthways.healthhonors.itemrenderers
{
 import com.healthways.vo.DateVO;
 import nl.demonsters.debugger.MonsterDebugger;
 import com.healthways.vo.MedicationVO;
 import mx.collections.ArrayCollection;
 import mx.utils.ObjectUtil;
 import com.flextras.calendar.IDayDataVO;
 import com.flextras.calendar.ICalendarDataVO;
 import mx.events.ResizeEvent;
 import mx.events.FlexEvent;
 import com.healthways.components.DailyPieChart;
 import com.flextras.calendar.defaultRenderers.DayRenderer;

 /**
  * @author Matthew Wallace
  */
 public class CalendarMedicationRenderer extends DayRenderer
 {
  private var chart : DailyPieChart;
  public function CalendarMedicationRenderer()
  {
   init();

  }

  private function init() : void
  {
   percentWidth = 100;
   percentHeight = 100;

   chart = new DailyPieChart();
   this.addElement(chart);    

   addEventListener(ResizeEvent.RESIZE, onResize);
   addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
  }

  private function onCreationComplete(event : FlexEvent) : void
  {
         /* here I would like to set chart display object visible
                          based on if I have custom data in the renderer or not */
  }

  private function onResize(event : ResizeEvent) : void
  {
   chart.x = (width * 0.5) - 25;
   chart.y = (height * 0.5) - 25;
  }


  override protected function createExpandDayButton() : void
  {
   //super.createExpandDayButton();
  }

  override protected function createDayTextField() : void
  {
   //super.createDayTextField();
  }


 }
}

what I need to understand is how to see if a renderer has custom data so that I can do some logic on the renderers creation complete.

thanks,
Matthew

Answer 1

The dayRenderer in the Flextras Calendar is, conceptually, modeled after itemRenderers in the Flex list based classes. That means the renderer may be reused when you change a month, day, or year, replacing the current data.

In your current dayRenderer, it is likely you are executing the init() method before any data is set.

You should tie into the Flex Component Lifecycle to make changes when data is created (or changed) instead of using creationComplete. Since you want to examine the dataProvider, you should look at the dayData object. I would override the set method, something like this:

protected var dayDataChanged : Boolean = false;

override public function set dayData(value:IDayDataVO):void{
    super._dayData = value;
    this.dayDataChanged = true;
    this.invalidateProperties();
}

You could also make this a bit more advanced to compare the current dataProvider with the new one to see if anything has changed, and invalidateProperties() conditionally if it has / has not.

In commitProperties(), try something like this:

if(this.dayDataChanged == true){
 // access this.dayData.dataProvider and perform whatever processing is needed
 this.dayDataChanged = false;
}

I will add that with your current dataProvider item, the date will default to ‘today’, which is unusual. The date is not usually set dynamically to the current date.

I’ll also add The dateField in your dataProvider is named ‘date’ but the dateField property you specify is ‘data’. In that situation, the Calendar may never send a dataPRovider’s data to the dayRenderer because it cannot determine what day it should end up on.