Flex3でカレンダーの指定日に色を付ける方法 : アシアルブログ

2008/03/10 │カテゴリ： Tech　 Flash　 Flex　

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

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

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

(※画像です）

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

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

■Main.mxml

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:as="*"
backgroundColor="#ffffff"
creationComplete="initApp()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function initApp():void {
// YYYY-MM-DD 形式の値の配列
var daysArray:Array = [
'2008-01-01','2008-02-11', '2008-03-20',
'2008-04-29', '2008-05-03','2008-05-04',
'2008-05-05','2008-05-06','2008-07-21',
'2008-09-15','2008-09-23','2008-10-13',
'2008-11-03','2008-11-24','2008-12-32',
];
dateChooser1.setHilightDays(daysArray);
dateChooser1.highlightColor = 0xff8800;
dateChooser1.highlight();
}
private function upadteDateChooser():void {
dateChooser1.highlight();
}
]]>
</mx:Script>
<as:ExDateChooser id="dateChooser1"
updateComplete="upadteDateChooser()"
todayColor="#BCF533"/>
</mx:Application>

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

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

■ExDateChooser.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:DateChooser xmlns:mx="http://www.adobe.com/2006/mxml" fontWeight="normal" textAlign="center">
<mx:Script>
<![CDATA[
use namespace mx_internal;
import mx.core.UITextField;
private var hilightDaysObj:Object = { };
private var _hilightDays:Array = [];
private var _highlightColor:int = 0xff0000;
private var _saturdayColor:int = 0x0000ff;
private var _sundayColor:int = 0xff0000;
public function setHilightDays(days:Array):void {
this._hilightDays = days;
for (var i:int = 0; i < days.length; i++) {
this.hilightDaysObj[days[i]] = true;
}
}
public function set highlightColor(value:int):void {
_highlightColor = value;
}
public function set saturdayColor(value:int):void {
_saturdayColor = value;
}
public function set sundayColor(value:int):void {
_sundayColor = value;
}
public function removeHilight():void {
this._hilightDays = [];
this.hilightDaysObj = [];
this.highlight();
}
public function highlight():void {
var y:String = String(this.displayedYear);
var _m:int = this.displayedMonth + 1;
var m:String = (_m < 10)? String("0" + _m): String(_m);
var calBody:Array = this.dateGrid.dayBlocksArray;
var dd:Array = [];
for (var i:int = 0; i < calBody.length; i++) {
if (calBody[i] is Array) {
var line:Array = calBody[i];
for (var j:int = 1; j < line.length; j++) {
var txt:UITextField = line[j];
var _txt:String = (int(txt.text) < 10)? "0" + txt.text: txt.text;
var _date:String = y + "-" + m + "-" + _txt;
var key:String = _date;
//trace(i + ":" + j + ":" + key);
if (this.hilightDaysObj[key]) {
txt.setColor(this._highlightColor);
} else if (i == 0) {
txt.setColor(this._sundayColor);
} else if (i == 6) {
txt.setColor(this._saturdayColor);
} else {
txt.setColor(0x000000);
}
}
}
}
}
]]>
</mx:Script>
</mx:DateChooser>

コメントフォーム

トラックバックURI

土曜日や日曜日に色を付ける、カスタムのDateChooserコンポーネント from ...The ballad of dead pixels...

を作った。サンプルとGoogle Codeのプロジェクトページ。 Flex 3(Flex SDK 3.2.0...

2009年01月23日 00:05