flex SDKを使いながらパタパタとやってみました。入力フィールドはHTMLで書かれてて、フィールドのonclickでflexのカレンダーがあがります。日付をクリックするとカレンダーが閉じるというものです。
埋め込みはスクリプトに以下のように書いてあげるだけです。あ、あとswfobject.js使ってます。便利便利。
new FlxCalendar( "renderTarget", "fieldTarget" );
そもそもカレンダーはjavascriptで検索するとかなりの数が出てきますし、機能やスタイルも様々です。今回作ったのはflexのDateChooseコンポーネントをそのまま使ってjavascriptと連携させただけのものでして、あまり気の利いた事はしていませんが、「flex始めました！」的なところから「で、何が出来んの？」まで来て、「おーすげーいろいろできるわー」まで来たあたりの人が書いてます。やっつけソースですが一応動く模様です。
最近になって仕事でflexをやり始めて、今知った事なのですが、*.as(package?)ファイルをコンパイルするとフラッシュファイル（swf）になるのね。mxmlファイルだけだと思ってました。
動作サンプル
■calendar.mxmlソース
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
borderStyle="none"
fontFamily="ＭＳ ゴシック"
fontSize="10"
fontWeight="normal"
backgroundColor="#FFFFFF"
height="177" width="170">
<mx:Script>
<![CDATA[
import mx.events.CalendarLayoutChangeEvent;
import flash.external.ExternalInterface;
private function useDate( eventObj:CalendarLayoutChangeEvent ) : void {
if (eventObj.currentTarget.selectedDate == null) return;
var setParam:Object = {
elemid : String( Application.application.parameters.elemid ),
fieldid : String( Application.application.parameters.fieldid ),
value : eventObj.currentTarget.selectedDate.getFullYear() +
"/" + (eventObj.currentTarget.selectedDate.getMonth()+1) +
"/" + eventObj.currentTarget.selectedDate.getDate()
};
ExternalInterface.call( "setField", setParam );
}
]]>
</mx:Script>
<mx:DateChooser x="0" y="0" height="177" width="170" change="useDate(event)" />
</mx:Application>
■html / javascript
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
function FlxCalendar( elemId, fieldId ){
var innerElem = document.createElement( "div" );
innerElem.id = "gen_" + elemId;
var elem = $( elemId );
elem.appendChild( innerElem );
elem.style.position = "absolute";
elem.style.backgroundColor = "#EEE";
elem.style.padding = "8px";
swfobject.embedSWF("calendar.swf?" + new Date(), innerElem.id, "170", "177", "9.0.0", false, { elemid : elemId, fieldid : fieldId }, { allowScriptAccess : "always" }, {});
elem.style.display = "none";
$( fieldId ).onclick = function(){
elem.style.display = "";
}
}
function setField( param ){
$( param.fieldid ).value = param.value;
$( param.elemid ).style.display = "none";
}
function $( id ){
return document.getElementById( id );
}
window.onload = function(){
new FlxCalendar( "renderTarget", "fieldTarget" );
}
</script>
</head>
<body>
<input type="text" size="20" id="fieldTarget" />
<div id="renderTarget">
</div>
</body>
</html>
こちらの記事もどうぞ！！
