1 Reply Latest reply on Sep 23, 2010 8:45 PM by Subeesh Arakkan

    How to override Extended DateChooser color property

    Devtron Level 3

      Hello

       

      calendarsScreenShot.png


      I am trying to change the "color" property on an Extended DateChooser control (picture A).

       

      I have some regular/oridinary Datechooser controls, which I am able to adjust the color properties on easily (picture B).

       


      Calendars A are defined so:

       

      <widgets:ExtendedDateChooser id="edc1"
               doubleClickEnabled="true"
               doubleClick="addButton_clickHandler(event)"
               dateCollection="{dateCollection}"
               colorField="color"
               dateField="date"
               narrativeField="narrative"
               displayedMonth="8"
               displayedYear="2010"
               />

       


      Calendars B are defined as so:

       

      <mx:DateChooser id="dc3"
              allowDisjointSelection="true"
              allowMultipleSelection="true"                               
              change="addDate3(event);"
              showToday="false"
              displayedMonth="10"
              displayedYear="2010"                                   
              />

       


      I have this CSS setup, for Calendars B:

       

      mx|DateChooser{
         
          content-background-color: #222222;
          header-colors: #656565, #434343;
          color: #cccccc;
          today-color: #e8e8e8;
          selection-color: #585500;
          border-color: #515151;
          font-size: 14pt;
          border-thickness-top: 0;
          selection-indicator-skin:ClassReference("mx.skins.halo.DateChooserIndicator");
          nextMonthUpSkin: ClassReference('mx.skins.Border');
          nextMonthDisabledSkin: ClassReference('mx.skins.Border');
          nextMonthDownSkin: ClassReference('mx.skins.Border');
          nextMonthOverSkin: ClassReference('mx.skins.Border');
          prevMonthUpSkin: ClassReference('mx.skins.Border');
          prevMonthDisabledSkin: ClassReference('mx.skins.Border');
          prevMonthDownSkin: ClassReference('mx.skins.Border');
          prevMonthOverSkin: ClassReference('mx.skins.Border');   
      }

       

       

       

      My problem is that Calendars A color/text is black and you cannot read that with the GraphiteGraphical theme (see attached photo above).

      (I would love to re-skin the entire app but do not have the time to do that right now.)

       

      How can I get Calendars A color/text to be white, like Calendars B?

       


      I have added this to Calendar A's extended class:
          override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
          {
              super.setStyle("color", "#CCCCCC");
              super.updateDisplayList(unscaledWidth, unscaledHeight);
          }

       

      I have also tried to add the setStyle override in in the extended constructor:

       

          public function ExtendedDateChooser()
          {
              super();
              super.setStyle("color", "#CCCCCC");
          }

       


      Neither work.

       

      I have also tried to add a styleName to my CSS definition, (and reference it from my calendar A) like so:

       

      .extendedDateChooser{
         
          content-background-color: #222222;
          header-colors: #656565, #434343;
          color: #cccccc;
          today-color: #e8e8e8;
          selection-color: #585500;
          border-color: #515151;
          font-size: 14pt;
          border-thickness-top: 0;
          selection-indicator-skin:ClassReference("mx.skins.halo.DateChooserIndicator");
         
      }

       

      <widgets:ExtendedDateChooser id="edc1"
               doubleClickEnabled="true"
               doubleClick="addButton_clickHandler(event)"
               dateCollection="{dateCollection}"
               colorField="color"
               dateField="date"
               narrativeField="narrative"
               displayedMonth="8"
               displayedYear="2010"
                styleName="extendedDateChooser"
               />

       

      ^ but that didnt't work either

       


      Any ideas how I can get Calendars A color/text to be white, like Calendars B? I'm lost!