【ハウツー】ゼロからはじめるThe Yahoo! UI Library - Calendar編 (8) カレンダーをカスタマイズする | パソコン

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

パソコン

急上昇ワード

[

]

【ハウツー】

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

8 カレンダーをカスタマイズする

古籏一浩　 [2007/11/13]

印刷

先頭
前へ
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- ／8

YUIのカレンダーは、スタイルシート部分に関して、多少カスタマイズすることができます。

標準で表示されるカレンダーは、やや大きめで標準のカレンダーは表示領域が大きいため、なるべく小さいサイズで表示したい場合があります。この場合、カレンダーを表示する<div>タグ(コンテナ)のスタイルシートを設定します。文字サイズを小さくすると全体的に小さくなるので、<div>タグにfont-size:60%のように指定します(サンプル10)。

サンプル10の実行結果。小さく表示している

サンプル10

<!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"> 
         <style type="text/css"><!--
                #calendarContainer {
                       font-size:60%;
                }
         --></style>
         <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() {
                       var dateRange = {      mindate:"7/21/2007", maxdate:"8/31/2007", MULTI_SELECT : true, close:true
                        };
                       calObj = new YAHOO.widget.CalendarGroup("calObj","calendarContainer", dateRange); 
                       calObj.cfg.setProperty("MONTHS_SHORT", ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]); 
                       calObj.cfg.setProperty("MONTHS_LONG", ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]); 
                 calObj.cfg.setProperty("WEEKDAYS_1CHAR", ["日", "月", "火", "水", "木", "金", "土"]); 
                 calObj.cfg.setProperty("WEEKDAYS_SHORT", ["日", "月", "火", "水", "木", "金", "土"]); 
                 calObj.cfg.setProperty("WEEKDAYS_MEDIUM",["日", "月", "火", "水", "木", "金", "土"]); 
                       calObj.cfg.setProperty("WEEKDAYS_LONG", ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"]); 
                 calObj.cfg.setProperty("MY_YEAR_POSITION", 1);
                 calObj.cfg.setProperty("MY_MONTH_POSITION", 2);
                 calObj.cfg.setProperty("MDY_YEAR_POSITION", 1);
                 calObj.cfg.setProperty("MDY_MONTH_POSITION", 2);
                 calObj.cfg.setProperty("MDY_DAY_POSITION", 3);

                       calObj.selectEvent.subscribe(checkDate, calObj, true);
                       calObj.deselectEvent.subscribe(checkDate, calObj, true);
                       calObj.render(); 
                }
                function checkDate(type,args,obj){
                       var selList = calObj.getSelectedDates();
                       var dateList = "";
                       for (var i=0; i<selList.length; i++) { 
                              var d = selList[i];
                              dateList += d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日, ";
                       }
                       YAHOO.util.Dom.get("sDate").value = dateList;
                }
         // --></script>
  </head>
  <body>
  <h1>YUIカレンダーサンプル(小さく表示する)</h1>
         <form>
                <input type="text" id="sDate" value="" size="80">
         </form>
         <div id="calendarContainer"></div>
  </body>
</html>

この他にも、カレンダーのスタイルをいくつか指定することができます。指定できるスタイルに関してはこのページで参照できます。

YUIは、Web上にあるライブラリに直接リンクしても構わないことになっています。カレンダーのスタイルシートとスクリプトファイルを直接Yahoo!のサイトから読み出すには、以下のようにURLを指定します(サンプル11)。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/calendar/assets/calendar.css"> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/calendar/calendar-min.js"></script>

サンプル11

<!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="http://yui.yahooapis.com/2.2.2/build/calendar/assets/calendar.css"> 
         <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
         <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/calendar/calendar-min.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>

YUIのカレンダーは高機能な割に手軽に使えるのが魅力です。日付を指定する場面や、単にカレンダーを表示させておく場合でも便利でしょう。