スポンサードリンク

Yahoo! User Interface Library - Calendar

YUI Calendarとは

Calendar componentはグラフィカルなカレンダーでユーザーが日付を選択できるようになります。JavaScript Onlyなので、ページのリフレッシュは必要ありません。

詳しくはhttp://developer.yahoo.com/yui/calendar/のオリジナルを読まれるのがよいと思います。

Calendarを使う前準備

必要なのは5つのファイルです。もちろんインストールは済ませておく必要があります。

<script type="text/javascript" src="your install path/yahoo-min.js"></script>
<script type="text/javascript" src="your install path/dom-min.js"></script>
<script type="text/javascript" src="your install path/event-min.js"></script>
<script type="text/javascript" src="your install path/calendar-min.js"></script>

<link rel="stylesheet" type="text/css" href="your install path/calendar.css"></script>

YAHOO.widget.Calendarを使ってカレンダーを書く

YAHOO.widget.Calendar

まずは一番簡単な例でカレンダーの表示をしてみます。下にあるように、カレンダーを表示した居場所にdivを用意して、JavaScriptを少し書いてあげるだけでOKです。

ID名は作成されたカレンダー(tableタグ)のid となります。なので、ユニークな名前にしなくてはなりません。
こんなかんじ：<table class="yui-calendar y2006" id="cal1" cellspacing="0">

<div id="cal1Container"></div>

<script type="text/javascript">
var cal1 = new YAHOO.widget.Calendar(
    "cal1", /* ID名 */
    "cal1Container" /* element名 */
);
cal1.render();
</script>

YUIカレンダーのオプション

YAHOO.widget.Calendarの第三引数はオプションをとります。ここでは、すべてのオプションを指定してみます。

<div id="cal2Container"></div>

<script type="text/javascript">
var options = {
    /* デフォルトで表示される月を指定 */
    pagedate:"12/2006",

    /* デフォルトで選択された状態にする */
    selected:"12/30/2006-01/03/2007, 12/24/2006",

    /* 選択可能な日付の下限。この場合2006年11月を見ると選択できない */
    mindate:"12/01/2006",

    /* 選択可能な日付の上限。この場合2007年1月13日以降が選択できない */
    maxdate:"01/12/2007",

    /* タイトルとして表示する文字列 */
    title:"カレンダー",

    /* カレンダーを閉じる為のボタンを表示 */
    close:true,

    /* よくわからず。IE6のバグ対応？ */
    iframe:true,

    /* 日付の複数選択を可能にする */
    MULTI_SELECT:true,

    /* 曜日を表示するか */
    SHOW_WEEKDAYS:true,

    /* 月のフォーマット指定 "short", "medium", and "long" がある */
    LOCALE_MONTHS:"short",

    /* 曜日のフォーマット指定 are "1char", "short", "medium", and "long" がある */
    LOCALE_WEEKDAYS:"1char",

    /* 週の初めを何曜日にするか。0が日曜なので、この場合月曜日 */
    START_WEEKDAY:1,

    /* 週の初めに何週目かを表示 */
    SHOW_WEEK_HEADER:true,

    /* 週の終わりに何週目かを表示 */
    SHOW_WEEK_FOOTER:true,

    /* デフォルト値のfalseでは必ず6週表示になるが、trueにすると最小4週表示になる */
    HIDE_BLANK_WEEKS:true

    /*
    ナビゲーション画像を自分の画像に変更することが可能
    NAV_ARROW_LEFT: "left_image_path",
    NAV_ARROW_RIGHT: "right_image_path",
    */
};
var cal2 = new YAHOO.widget.Calendar("cal2", "cal2Container", options);
cal2.render();
</script>

ローカライズ

日付のフォーマットをyyyy/mm/dd にしたり、月・曜日を日本語に変更することが可能ですので、やってみます。

<div id="cal3Container"></div>

<script type="text/javascript">
var cal3 = new YAHOO.widget.Calendar("cal3", "cal3Container");

// Correct formats for Japan: yyyy/mm/dd, mm/dd, yyyy/mm

cal3.cfg.setProperty("MDY_YEAR_POSITION", 1);
cal3.cfg.setProperty("MDY_MONTH_POSITION", 2);
cal3.cfg.setProperty("MDY_DAY_POSITION", 3);

cal3.cfg.setProperty("MY_YEAR_POSITION", 1);
cal3.cfg.setProperty("MY_MONTH_POSITION", 2);

// Date labels for Japanese locale

cal3.cfg.setProperty("MONTHS_SHORT",   ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]);
cal3.cfg.setProperty("MONTHS_LONG",    ["睦月", "如月", "弥生", "卯月", "皐月", "水無月", "文月", "葉月", "長月", "神無月", "霜月", "師走"]);
cal3.cfg.setProperty("WEEKDAYS_1CHAR", ["S", "M", "T", "W", "T", "F", "S"]);
cal3.cfg.setProperty("WEEKDAYS_SHORT", ["日", "月", "火", "水", "木", "金", "土"]);
cal3.cfg.setProperty("WEEKDAYS_MEDIUM",["日曜", "月曜", "火曜", "水曜", "木曜", "金曜", "土曜"]);
cal3.cfg.setProperty("WEEKDAYS_LONG",  ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"]);

/* こういうアレンジもできるはず 
cal3.cfg.setProperty("WEEKDAYS_SHORT", ["<font color='red'>日</font>", "月", "火", "水", "木", "金", "土"]);
*/

cal3.render();
</script>

YAHOO.widget.CalendarGroup

YAHOO.widget.Calendarの代わりにYAHOO.widget.CalendarGroupを使用し、pagesを指定することで、カレンダーを２つ以上表示するようになります。pages以外のオプションはYAHOO.widget.Calendarと同じようですので、上記の項を参照してください。

さらにここでは、スタイルシートで日曜日が赤色、土曜日が青色になるように指定しています。詳しくは次のスタイルシートの項をご覧ください。

<style type="text/css">
#cal4Container .wd0{border-color:red;}
#cal4Container .wd6{border-color:blue;}
</style>

<div id="cal4Container"></div>

<script type="text/javascript">
var cal4 = new YAHOO.widget.CalendarGroup("cal4", "cal4Container", {pages:3});
cal4.render();
</script>

スタイルシート

YAHOO.widget.Calendar, YAHOO.widget.CalendarGroupの描画したカレンダーにはCSSを用いて年、月、週、曜日、日をカスタムできるようになっています。

年	.y2000
月	.m(1-12)
週	.w(1-52)
曜日	.w(0-6) 0が日曜日
日	.d(1-31)

カスタムイベント

YUIカレンダーには初めからカスタムイベントがいくつか用意されていて、たとえば、日付を選択した時に、なにか処理を行う。といったことも簡単にできるようになっています。

下のサンプルページでは、使用できるイベントをすべて試してみます。

カスタムイベントのサンプルページ

メールアドレス:
コメント^*: