コンテンツ
メンバーのページ

基本的な使い方

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

ダウンロードページより最新版の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 選択中の日に付加されるクラスです。