アシアルの中の人が技術と思いのたけをつづるブログ

Flex3でカレンダーの指定日に色を付ける方法

タグ [　 Tech　 Flash　 Flex　 ]
こんにちは、中川です。最近は社内用のAirアプリを作ったりしています。
Flex3では、いろいろと便利なコントロールが容易されていますが、
標準のものでは、なかなかかゆいところに手が届かないものも出てくると思います。
その中の一つに「DateChooser」というものがあります。
日付選択用のカレンダーコントロールを簡単に設置できるのですが、
曜日に色をつけたり、指定した日に色をつけたりする方法がデフォルトの設定では、
なさそうでしたので、ちょっとカスタマイズしてみました。


これが、普通のDateChooserです。今日の日付に色を付ける機能は備わっています。

(※画像です）

今回は、土曜日、日曜日、指定日に色を付けるようにカスタマイズしてみます。
実際に動作させてみるとこんな感じになります。


以下のように使用することができます。

■Main.mxml
  1. <?xml version="1.0"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:as="*" 
  3.   backgroundColor="#ffffff"
  4.   creationComplete="initApp()">
  5.   <mx:Script>
  6.     <![CDATA[
  7.     import mx.controls.Alert;
  8.       
  9.     private function initApp():void {
  10.       // YYYY-MM-DD 形式の値の配列
  11.       var daysArray:Array = [
  12.         '2008-01-01','2008-02-11', '2008-03-20', 
  13.         '2008-04-29', '2008-05-03','2008-05-04',
  14.         '2008-05-05','2008-05-06','2008-07-21',
  15.         '2008-09-15','2008-09-23','2008-10-13',
  16.         '2008-11-03','2008-11-24','2008-12-32',
  17.         ];
  18.       dateChooser1.setHilightDays(daysArray);
  19.       dateChooser1.highlightColor = 0xff8800;
  20.       dateChooser1.highlight();
  21.     }
  22.     
  23.     private function upadteDateChooser():void {
  24.       dateChooser1.highlight();
  25.     }
  26.     ]]>
  27.   </mx:Script>
  28.   <as:ExDateChooser id="dateChooser1" 
  29.     updateComplete="upadteDateChooser()" 
  30.     todayColor="#BCF533"/>
  31. </mx:Application>

上記サンプルでは、直接スクリプト内に日付の配列を書いていますが、
実際は、XMLや、DBから持って来ることになると思います。
DBからのデータを扱い安いように「YYYY-MM-DD」形式を渡すようにしています。

カスタマイズした、ExDateChooser.mxmlは以下のようになっています。

■ExDateChooser.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:DateChooser xmlns:mx="http://www.adobe.com/2006/mxml" fontWeight="normal" textAlign="center">
  3.   <mx:Script>
  4.     <![CDATA[
  5.       use namespace mx_internal;
  6.       
  7.       import mx.core.UITextField;
  8.       
  9.       private var hilightDaysObj:Object = { };
  10.       private var _hilightDays:Array = [];
  11.       private var _highlightColor:int = 0xff0000;
  12.       private var _saturdayColor:int = 0x0000ff;
  13.       private var _sundayColor:int = 0xff0000;
  14.       
  15.       public function setHilightDays(days:Array):void {
  16.         this._hilightDays = days;
  17.         for (var i:int = 0; i < days.length; i++) {
  18.           this.hilightDaysObj[days[i]] = true;
  19.         }
  20.       }
  21.       
  22.       public function set highlightColor(value:int):void {
  23.         _highlightColor = value;
  24.       }
  25.       
  26.       public function set saturdayColor(value:int):void {
  27.         _saturdayColor = value;
  28.       }
  29.       
  30.       public function set sundayColor(value:int):void {
  31.         _sundayColor = value;
  32.       }
  33.       
  34.       public function removeHilight():void {
  35.         this._hilightDays = [];
  36.         this.hilightDaysObj = [];
  37.         this.highlight();
  38.       }
  39.       
  40.       public function highlight():void {
  41.         var y:String = String(this.displayedYear);
  42.         var _m:int = this.displayedMonth + 1;
  43.         var m:String = (_m < 10)? String("0" + _m): String(_m);
  44.         var calBody:Array = this.dateGrid.dayBlocksArray;
  45.         var dd:Array = [];
  46.         for (var i:int = 0; i < calBody.length; i++) {
  47.           if (calBody[i] is Array) {  
  48.             var line:Array = calBody[i];
  49.             for (var j:int = 1; j < line.length; j++) {
  50.               var txt:UITextField = line[j];
  51.               var _txt:String = (int(txt.text) < 10)? "0" + txt.text: txt.text;
  52.               var _date:String = y + "-" + m + "-" + _txt;
  53.               var key:String = _date;
  54.               //trace(i + ":" + j + ":" + key);
  55.               if (this.hilightDaysObj[key]) {
  56.                 txt.setColor(this._highlightColor);
  57.               } else if (i == 0) {
  58.                 txt.setColor(this._sundayColor);
  59.               } else if (i == 6) {
  60.                 txt.setColor(this._saturdayColor);
  61.               } else {
  62.                 txt.setColor(0x000000);
  63.               }
  64.             }
  65.           }
  66.         }
  67.       }
  68.     ]]>
  69.   </mx:Script>
  70. </mx:DateChooser>

コメントフォーム

認証
captcha_key
 

トラックバック

トラックバックURI :

最近の記事