JavaScript + Ajax 実践サンプル集

複数カレンダー

説明補足説明コード分割コードその他関連書籍コメント投稿

このサンプルは、Webページにカレンダーを3個表示します。YUIのCalendarは、Webページに任意のカレンダーを表示することができます。

Webページに複数のカレンダーを表示するには、「YAHOO.widget.CalendarGroup」のオブジェクト(クラス)を作成してカレンダーを表示します。カレンダーの個数は、引数「pages:」に指定します。

YAHOO.myCalendar.cal1 = 
  new YAHOO.widget.CalendarGroup(
    "cal1","Container", 
     {pages:3, 
      title:"日付を選択してください...", 
      close:true }
  );

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

function initDoc() {
  YAHOO.myCalendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","Container", { pages:3, title:"日付を選択してください...", close:true } );
  YAHOO.myCalendar.cal1.cfg.setProperty("MDY_YEAR_POSITION", 1);
  YAHOO.myCalendar.cal1.cfg.setProperty("MDY_MONTH_POSITION", 2);
  YAHOO.myCalendar.cal1.cfg.setProperty("MDY_DAY_POSITION", 3);

YAHOO.myCalendar.cal1.cfg.setProperty("MY_YEAR_POSITION", 1);
  YAHOO.myCalendar.cal1.cfg.setProperty("MY_MONTH_POSITION", 2);

YAHOO.myCalendar.cal1.cfg.setProperty("MONTHS_SHORT", ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]);
  YAHOO.myCalendar.cal1.cfg.setProperty("MONTHS_LONG", ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]);
  YAHOO.myCalendar.cal1.cfg.setProperty("WEEKDAYS_1CHAR", ["日", "月", "火", "水", "木", "金", "土"]);
  YAHOO.myCalendar.cal1.cfg.setProperty("WEEKDAYS_SHORT", ["日", "月", "火", "水", "木", "金", "土"]);
  YAHOO.myCalendar.cal1.cfg.setProperty("WEEKDAYS_MEDIUM", ["日", "月", "火", "水", "木", "金", "土"]);
  YAHOO.myCalendar.cal1.cfg.setProperty("WEEKDAYS_LONG", ["日", "月", "火", "水", "木", "金", "土"]);

YAHOO.myCalendar.cal1.render();
}
</script>
</head>
<body>
<div id="Container"></div>
</body>
</html>

CSS部HEAD部BODY部その他

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
<link type="text/css" rel="stylesheet" href="yui/build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="yui/build/reset/reset.css">		
<link type="text/css" rel="stylesheet" href="yui/build/calendar/assets/calendar.css">

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

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

<script>
YAHOO.namespace("myCalendar");
YAHOO.util.Event.addListener(window, "load", initDoc);

function initDoc() {
//YAHOO.myCalendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","Container");
  YAHOO.myCalendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","Container", { pages:3, title:"日付を選択してください...", close:true } );
	YAHOO.myCalendar.cal1.render();
}
</script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。