Javascript で汎用カレンダ (Codelogy)

Javascript で汎用カレンダ

最近 Javascript を使い始めました。
「手始めに、ひとつ汎用的なコントロールを作ってみようか。(←ライブラリ開発者の習性)」
というわけで、あちこち使いまわせるカレンダを作ってみました。

calendar.js (Javascript)
calendar.css (カレンダ用スタイルシート)

このカレンダーをページに埋め込むに方法 (Javascript) は以下の通り:

<script type="text/javascript">
<!--
    //初期化関数
    function init(){

        //Calendar オブジェクトを作成
        var c =new Calendar("my_calendar", "カレンダのテスト", document.body);

        //位置指定, 表示
        c.setPos(512, 128);
        c.show();
    }

    //初期化関数 (init) をページのロード終了時に実行するよう指定
    window.onload =init;
//-->
</script>

まずは、Calendar クラスのオブジェクトの生成。
コンストラクタには引数として以下の　3つを指定します。

カレンダ要素のID (ドキュメント内で一意)
キャプションテキスト
親要素 (殆どの場合 document.body)

次に、setPos メソッドでカレンダの表示位置 (左上端の座標) を指定。
引数は、x, y 座標 (単位: ピクセル) です。

最後に、show メソッドでカレンダを「表示」状態に設定してください。(初期状態では「非表示」)

これで、あなたのページにもカレンダが表示されるようになったはず。
ですが、カレンダが「ただ表示されるだけ」では利用価値がありません。
ユーザが選択した日付を取得するなどのインタラクティブな処理ができないと困ります。

次のエントリでは、その方法について解説します。

担当: 成田 (しかし、Ajax はバッドノウハウの集大成だと思う。)

日時: 2007年05月25日 20:49 | パーマリンク

Javascript で汎用カレンダ

コメントを投稿

Search

About