カレンダーオブジェクトは、年月を指定するだけで、指定したフレーム内のページにカレンダーを表示することができます。
今日は、色を変えて表示されます。
また、前月ボタン（△）と、翌月ボタン（▽）をクリックすることで、前月や翌月のカレンダーを表示することもできます。
カレンダーオブジェクトを利用すると、以下のようなカレンダーを表示できます。
ただし、2001年10月3日のカレンダーの表示例ですので、前月や翌月の表示はできません。
| △ | 2001年10月 | ▽ | ||||
|---|---|---|---|---|---|---|
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
カレンダーオブジェクトを利用するためには、newで以下のコンストラクタを呼び出す必要があります。 このコンストラクタが返却するカレンダーオブジェクトのインスタンス変数は、保存しておく必要があります。 このインスタンス変数を使って、カレンダーオブジェクトのメソッドを呼び出したりすることができます。 カレンダーオブジェクトでは、JavaScriptのソースを自動生成しているため、このインスタンス変数名の文字列と、カレンダーオブジェクトとの関係（parent, opener, selfなど）をパラメータで指定する必要があります。 また、カレンダー表示するオブジェクトを指定することで、そのオブジェクト内に表示されます。
calobj = カレンダー表示領域（this.フレーム名）;
インスタンス変数名 = new Cal('インスタンス変数名', 関係, calbj);
|
※インスタンス変数名とフレーム名を同じ名前にすると、正しく表示されませんので、注意してください。
カレンダーオブジェクトのメソッド一覧です。
| メソッド名 | 機能 |
|---|---|
| disp(yyyy, mm, dd); | 指定した月のカレンダー表示 |
| dispPrev(); | 前月のカレンダー表示 |
| dispNext(); | 翌月のカレンダー表示 |
| setHead(str); | HTMLヘッダの登録 |
| setFoot(str); | HTMLフッタの登録 |
フレームを2つ作成し、片方のフレームで年月を入力し、別のフレームにカレンダーを表示する場合の例について説明します。
カレンダーオブジェクトは、cal.jsに含まれていますので、メニューオブジェクトのソース（cal.js）のダウンロードします。
そして、このcal.jsをフレームを持つHTML内に指定します。
onLoadイベントで呼ばれる初期化関数を作成し、newでコンストラクタを呼び出します。
フレーム表示する場合は、カレンダーを表示するオブジェクトに対するスクリプトのあるオブジェクトとの関係は、parentになります。
あと、setHeadメソッドとsetFootメソッドで、HTMLヘッダとフッタを登録し、dispメソッドで表示するだけです。
<html>
<head>
<title>JavaScriptカレンダ</title>
<script type="text/javascript" language="javascript" src="cal.js"></script>
<script type="text/javascript" language="JavaScript"><!--
var objCal;
var head = '<html><head>\n'
+ '<link rel="stylesheet" type="text/css" href="cal.css">\n';
+ '</head><body>';
var foot = '</body></html>';
function init() {
objCal = new Cal('objCal', 'parent', this.cal);
objCal.setHead(head);
objCal.setFoot(foot);
objCal.disp();
}
// --></script>
</head>
<frameset rows="30,*" border="0" onLoad="init();">
<frame name="enter" src="enter.htm" marginheight="2" marginwidth="2" />
<frame name="cal" src="cal.htm" marginheight="2" marginwidth="2" />
</frameset>
<noframes>
<p>FRAME対応のブラウザで参照してください。</p>
</noframes>
</html>
|
フォームから年月を指定すると、サブウィンドウを開いて表示する例について説明します。
カレンダーオブジェクトは、cal.jsに含まれていますので、メニューオブジェクトのソース（cal.js）のダウンロードし、HTML内に指定します。
onLoadイベントで呼ばれる初期化関数を作成し、newでコンストラクタを呼び出します。
サブウィンドウ表示する場合は、カレンダーを表示するオブジェクトに対するスクリプトのあるオブジェクトとの関係は、openerになります。
あとは、setHeadメソッドとsetFootメソッドで、HTMLヘッダとフッタを登録し、dispメソッドで表示するだけです。
<html>
<head>
<title>JavaScriptカレンダ</title>
<script type="text/javascript" language="javascript" src="cal.js"></script>
<script type="text/javascript" language="JavaScript"><!--
var objCal;
var head = '<html><head>\n'
+ '<link rel="stylesheet" type="text/css" href="cal.css">\n';
+ '</head><body>';
var foot = '</body></html>';
function disp(frm, fld) {
year = document.form01.year.value;
month = document.form01.month.value;
win = window.open('', 'calWin',
'width=190,height=230,resizable=yes,alwaysRaised=yes');
objCal = new Cal('objCal', 'opener', win);
objCal.setHead(head);
objCal.setFoot(foot);
objCal.disp(year, month, 0);
document.form01.year.value = '';
document.form01.month.value = '';
}
// --></script>
</head>
<body>
<h1>JavaScriptカレンダ</h1>
<form name="form01">
<input type="text" name="year" size="6">年
<input type="text" name="month" size="4">月
<input type="button" value="表示" onclick="disp();">
</form>
</body>
</html>
|