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