基本的な使い方

モジュールのダウンロードと展開

ダウンロードページより最新版のzipファイルをダウンロードしてください。ダウンロードに成功したら、カレンダーを使いたいサイトの任意のディレクトリに展開してください。

ファイルの読込み

一般的な他のJavaScriptライブラリと同じように、カレンダーを使いたいページのHTMLファイルでscriptタグを使ってファイルを読み込みます。 Calendarは3つのファイルから成り立っています（そのうちの1つは外部プロジェクトの成果物です）。また、calendar.cssはカレンダー用のスタイルシートです。デザインを変えたいときは、このファイルを編集してください。

2つのJavaScriptファイルは必ず、次の例のような順番で読み込んでください。また、スタイルシートもlinkタグで読み込むようにしてください。

<html>
	<head>
		...
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript" src="calendar.js"></script>
		<link rel="stylesheet" type="text/css" href="calendar.css" />
		...
	</head>
	<body>
		...
	</body>
</html>

カレンダーの設置

カレンダーを設置するには、次のように最初にオブジェクトを生成します。

<html>
	<head>
		...
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript" src="calendar.js"></script>
		<link rel="stylesheet" type="text/css" href="calendar.css" />
		...
		<script type="text/javascript">
			var calendar = new Calendar();
		</script>
	</head>
	<body>
		...
	</body>
</html>

次に、カレンダーのオブジェクトをinputタグに紐付けます。カレンダーオブジェクトのshowメソッドを呼び出すとカレンダーウィンドウが表示されますが、このとき引数として紐付けたいinputタグのidを渡します。日付が選択されたときは、紐付けされたinputタグのvalue属性の値となります。

<html>
	<head>
		...
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript" src="calendar.js"></script>
		<link rel="stylesheet" type="text/css" href="calendar.css" />
		...
		<script type="text/javascript">
			var calendar = new Calendar();
		</script>
	</head>
	<body>
		<form action="...">
			<input type="text" name="..." id="..." 
				onclick="calendar.show(this.id)" />
		</form>
	</body>
</html>

hideメソッドを呼び出すことによってカレンダーを消すことが出来ます。 onchangeイベントでこのメソッドを呼び出すと、日付が選択されたらカレンダーを消すということが出来るようになります。

<html>
	<head>
		...
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript" src="calendar.js"></script>
		<link rel="stylesheet" type="text/css" href="calendar.css" />
		...
		<script type="text/javascript">
			var calendar = new Calendar();
		</script>
	</head>
	<body>
		<form action="...">
			<input type="text" name="..." id="..." 
				onclick="calendar.show(this.id)"
				onchange="calendar.hide()" />
		</form>
	</body>
</html>

デザイン

Calendarは、デザインをスタイルシートで変更できるようになっています。指定できるクラスと内容は次のようになります。

クラス名	説明
Calendar_dialog	カレンダーウィンドウを指します。中にテーブルがあり、そのテーブルでカレンダーの日付を整列させています。
Calendar_close	カレンダーのクローズボタンを表示するエリアです。中にボタンがあり、そのボタンが押されるとカレンダーウィンドウが閉じます。
Calendar_year	表示している日の年と、年の増減ボタンを表示するエリアです。中に年を増減するボタンと、Calendar_year_labelクラスが付加されたタグがあります。
Calendar_year_label	表示している日の年を表示するエリアです。
Calendar_month	表示している日の月と、月の増減ボタンを表示するエリアです。中に月を増減するボタンと、Calendar_month_labelクラスが付加されたタグがあります。
Calendar_month_label	表示している日の月を表示するエリアです。
Calendar_week	カレンダーの週に付加されるクラスです。実質的にはテーブルのtrタグに付加されます。
Calendar_day	カレンダーの日に付加されるクラスです。実質的にはテーブルのtdタグに付加されます。
Calendar_day_0	カレンダーの日曜日に付加されるクラスです。
Calendar_day_1	カレンダーの月曜日に付加されるクラスです。
Calendar_day_2	カレンダーの火曜日に付加されるクラスです。
Calendar_day_3	カレンダーの水曜日に付加されるクラスです。
Calendar_day_4	カレンダーの木曜日に付加されるクラスです。
Calendar_day_5	カレンダーの金曜日に付加されるクラスです。
Calendar_day_6	カレンダーの土曜日に付加されるクラスです。
Calendar_day_prevMonth	表示中の月より前の月の日に付加されるクラスです。
Calendar_day_currentMonth	表示中の月の日に付加されるクラスです。
Calendar_day_nextMonth	表示中の月より次の月の日に付加されるクラスです。
Calendar_day_currentDay	選択中の日に付加されるクラスです。