Ajax Yahoo! UI Library カレンダーを表示する

-


Topページ  >  お勉強  >  Ajax  >  カレンダーを表示する 

カレンダーを表示する

日付を選択可能なカレンダーを表示します。




Yahoo! UI Library


使用バージョン:2.2.0 公式サイト





1. ダウンロードしたyahoo.jsを読み込みます。

<script type="text/javascript"
     src="./yahoo.js"></script>


2. ダウンロードしたevent.jsを読み込みます。

<script type="text/javascript"
     src="./event.js"></script>


3. ダウンロードしたdom.jsを読み込みます。

<script type="text/javascript"
     src="./dom.js"></script>


4. ダウンロードしたcalendar.jsを読み込みます。

<script type="text/javascript"
     src="./calendar.js"></script>


5. ダウンロードしたcalendar.cssを読み込みます。

// このCSSファイルでカレンダーのレイアウトが行われます。
<link rel="stylesheet"
     href="./calendar.css" type="text/css" media="all">


6. YAHOO.widget.Calendarクラスを生成して、renderメソッドを実行します。

[JavaScript]
ar calenderObj =
  new YAHOO.widget.Calendar(
    "cal",
    "dispCalender",
    { START_WEEKDAY:0, title:"seleted date"
  );

calenderObj.render();
 :
 :
[HTML]
<div id="dispCalender"></div>




calenadrObject = YAHOO.widget.Calendar( id, element, { option }


calenadrObject 生成されたカレンダーオブジェクト
id カレンダーID。カレンダーごとにユニークなIDでなくてはいけません。
element カレンダーを表示する対象のエレメントID
option 実行時のオプション(全て省略可能)
title:
  カレンダーのタイトル
  指定例) title:"タイトルです"
close:
  『閉じる』ボタンを表示するかどうかの指定
  true … 表示する
  false … 表示しない
  指定例) close:true
pagedate:
  デフォルトで表示される月の指定
  指定例) pagedate:"04/2007"
selected:
  デフォルトで選択された状態にする
  指定例) selected:"04/13/2007-04/16/2007, 04/24/2007"<
mindate:
  選択可能な日付の下限の指定
  指定例) mindate:"04/25/2007"
maxdate:
  選択可能な日付の上限の指定
  指定例) mindate:"04/27/2007"
START_WEEKDAY:
  一番左に何曜日を表示するかの指定
  0 … 日曜日
  1 … 月曜日
  :
  6 … 土曜日
  指定例) START_WEEKDAY:0
SHOW_WEEKDAYS:
  曜日を表示するかどうかの指定
  true … 曜日を表示する
  false … 曜日は表示しない
  指定例) SHOW_WEEKDAYS:true
LOCALE_MONTHS:
  月のフォーマット指定
  "long" … 4月の場合、Aprilと表示される
  "short" … 4月の場合、Aprと表示される
  指定例) LOCALE_MONTHS:"long"
LOCALE_WEEKDAYS:
  週のフォーマット指定
  "1char" … 月曜の場合、Mと表示される
  "short" … 月曜の場合、Moと表示される
  "medium" … 月曜の場合、Monと表示される
  "long" … 月曜の場合、Mondayと表示される
  指定例) LOCALE_WEEKDAYS:"short"
SHOW_WEEK_HEADER:
  週の左側に「現在何週目か」を表示するかどうかの指定
  true … 表示する
  false … 表示しない
  指定例) SHOW_WEEK_HEADER:true
SHOW_WEEK_FOOTER:
  週の右側に「現在何週目か」を表示するかどうかの指定
  true … 表示する
  false … 表示しない
  指定例) SHOW_WEEK_FOOTER:true
HIDE_BLANK_WEEKS:
  表示する週数の指定
  true … 6週間固定(6週未満の場合は来月分の週が表示される)
  false … その月に存在する週のみ表示される
  指定例) HIDE_BLANK_WEEKS:true
MULTI_SELECT:
  日付の複数選択が可能かどうかの指定
  true … 複数選択可能
  false … 1日のみ選択可能
  指定例) MULTI_SELECT:true



↓インラインフレーム内でサンプルが動作しています。





[Ajax - Yahoo! UI Library - 画面]



Topページ  >  お勉強  >  Ajax  >  カレンダーを表示する 






-