ゼロからはじめるThe Yahoo! UI Library - Calendar編

それでは最も簡単な例から始めましょう。

サンプル01は単純なカレンダーを表示するだけのスクリプトです。クリックしても日付がハイライトされるだけです。カレンダー機能を使うには、以下のように、スタイルシートとスクリプトファイルをあらかじめ読み込ませておく必要があります。

まず、スタイルシートファイルであるcalendar.cssを<link>タグを使って読み込ませます。

<link rel="stylesheet" type="text/css" href="css/calendar.css">

次に、2つのスクリプトファイルを<script>タグを使って読み込ませます。

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

カレンダー機能は表示数に制限がなく、ページ上に何カ所でも表示させられます。このため、表示すべき場所(コンテナ＝入れ物)を<div>タグで設定しておく必要があります。サンプル01では以下のように<div>タグを用意しID名を指定しています。ここで指定したID名を使って各種カレンダー機能を利用します。

<div id="calendarContainer"></div>

ただし、これだけではカレンダーは表示されません。サンプル01ではページが読み込まれた後にカレンダーを表示させています。

ページが読み込み後の処理を行うには、以下に掲載したリストのように、window.onload = function() { ～ }の～の中に処理を記述します。表示するカレンダーの生成はnew YAHOO.widget.Calendar()とし、パラメータにはカレンダーのIDと表示先の<div>タグのID名を指定します。これでカレンダーオブジェクトが作成されるので、いったん変数に入れておきます。サンプル01ではcalObj変数にカレンダーオブジェクトの参照が入っています。

また、new YAHOO.widget.Calendar()は内部的にカレンダーが生成されるだけでページ上には表示されません。ページ上にカレンダーを表示するにはカレンダーオブジェクトのrender()メソッドを使う必要があります。これで、やっとカレンダーがページ上に表示されるようになります。

サンプル01の実行結果。カレンダーが表示される

サンプル01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
         <meta http-equiv="content-type" content="text/html;charset=utf-8">
         <title>YUIカレンダーサンプル</title>
         <link rel="stylesheet" type="text/css" href="css/calendar.css"> 
         <script type="text/javascript" src="js/yahoo-dom-event.js"></script> 
         <script type="text/javascript" src="js/calendar.js"></script> 
         <script type="text/javascript"><!--
                window.onload = function() { 
                       var calObj = new YAHOO.widget.Calendar("calObj","calendarContainer"); 
                       calObj.render(); 
                }
         // --></script>
  </head>
  <body>
  <h1>YUIカレンダーサンプル(基本)</h1>
         <div id="calendarContainer"></div> 
  </body>
</html>

カレンダーにクローズボタンを追加する

カレンダーは、ページ上にずっと表示していることは少なく、日付の閲覧や設定する場面のみ必要なはずです。そこでサンプル02では、カレンダーにクローズボタンが表示されるように設定しています。

クローズボタンを表示するかどうかはYAHOO.widget.Calendar()の3番目のパラメータで設定できます。3番目のパラメータにclose:trueを指定するとクローズボタンが表示され、何も指定しないかclose:falseとするとクローズボタンは表示されません。以下のように指定するとカレンダーにクローズボタンが表示されるようになります。3番目のパラメータは他にも多くのオプションを設定するようになっているため{～}という記述になります。

new YAHOO.widget.Calendar("calObj","calendarContainer", { close:true });

サンプル02の実行結果。クローズボタンの表示

サンプル02

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
         <meta http-equiv="content-type" content="text/html;charset=utf-8">
         <title>YUIカレンダーサンプル</title>
         <link rel="stylesheet" type="text/css" href="css/calendar.css"> 
         <script type="text/javascript" src="js/yahoo-dom-event.js"></script> 
         <script type="text/javascript" src="js/calendar.js"></script> 
         <script type="text/javascript"><!--
                window.onload = function() { 
                       var calObj = new YAHOO.widget.Calendar("calObj","calendarContainer", { close:true }); 
                       calObj.render(); 
                }
         // --></script>
  </head>
  <body>
  <h1>YUIカレンダーサンプル(基本)</h1>
         <div id="calendarContainer"></div> 
  </body>
</html>

表示/非表示の切り替えを可能にする

サンプル02のようにカレンダーを閉じるのではなく、単純に表示/非表示を行うこともできます。この場合、表示するにはshow()、非表示にするにはhide()を使います。サンプル03ではボタンをクリックすることでカレンダーを表示したり、消したりできます。実際にカレンダー機能が必要になる場面では、サンプル03のように表示と非表示を切り替えて使うことになるでしょう。

サンプル03の実行結果。表示非表示の制御

サンプル03

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
         <meta http-equiv="content-type" content="text/html;charset=utf-8">
         <title>YUIカレンダーサンプル</title>
         <link rel="stylesheet" type="text/css" href="css/calendar.css"> 
         <script type="text/javascript" src="js/yahoo-dom-event.js"></script> 
         <script type="text/javascript" src="js/calendar.js"></script> 
         <script type="text/javascript"><!--
                var calObj;
                window.onload = function() { 
                       calObj = new YAHOO.widget.Calendar("calObj","calendarContainer", { close:true });    
                       calObj.render(); 
                }
         // --></script>
  </head>
  <body>
  <h1>YUIカレンダーサンプル(表示/非表示の切り替え)</h1>
         <form>
                <input type="button" value="表示" onClick="calObj.show()">
                <input type="button" value="非表示" onClick="calObj.hide()">
         </form>
         <div id="calendarContainer"></div> 
  </body>
</html>