WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)
WF[EACf[

■ JavaScript - サンプル集(257種類) - 時間
   - カレンダーVer5(表示月選択可能・別ウィンドウ)

今月のカレンダーを表示するスクリプトVer5です。
機能は、 ・祝日表示
・土曜を青色に、日曜を赤色、当日を目立つように配色
・配色は好きな色を指定可能
・祝日以外のクリスマスや雛祭りなどの記念日もフォロー
です。 また、表示する月を選択できます。
ボタンを押すと、別ウィンドウでカレンダーが表示されます。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。)
ソースを見る
解説を見る





[ ソース ]

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset = Shift_JIS">

<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp

	//曜日名
	youbis = new Array('日','月','火','水','木','金','土');

	//振り替え休日時に表示したい文字列
	hurikae_moji = '振り替え休日';

	//日曜日の文字色
	sunday_color = "#b54b44";

	//土曜日の文字色
	saturday_color = "#3f6a90";

	//今日の文字色
	today_color = "#f0e9d5";

	//今日の背景色
	today_bgcolor = "#82ad41";

	//カレンダー全体の背景色
	table_bgcolor = "#f4e8d1";

	//曜日名欄の背景色
	th_bgcolor = "#ffa96f";

	//各日付欄の横幅
	td_width = 50;

	//各日付欄の高さ
	td_height = 50;


	//文字のサイズ
	font_size = 14;

	//背景色の指定
	BG_COLOR = '#ffffff';

	//文字色の指定
	TEXT_COLOR = '#000000';

	//リンク色の指定
	LINK_COLOR = '#0000ff';

	//リンク色の指定
	ALINK_COLOR = '#ff0000';

	//リンク色の指定
	VLINK_COLOR = '#00ff00';

	//ウィンドウサイズ
	my_width = 450;
	my_height = 450;


	syukujitu = new Array();
	for(i = 0; i < 22; i++)syukujitu[i] = new Array();
	syukujitu[0][0] = 1;
	syukujitu[0][1] = 1;
	syukujitu[0][2] = '元日';
	syukujitu[0][3] = 0;
	syukujitu[0][4] = 0;

	syukujitu[1][0] = 1;
	syukujitu[1][1] = 0;
	syukujitu[1][2] = '成人の日';
	syukujitu[1][3] = 0;
	syukujitu[1][4] = '2,1';

	syukujitu[2][0] = 2;
	syukujitu[2][1] = 11;
	syukujitu[2][2] = '建国記念日';
	syukujitu[2][3] = 0;
	syukujitu[2][4] = 0;

	syukujitu[3][0] = 3;
	syukujitu[3][1] = 20;
	syukujitu[3][2] = '春分の日';
	syukujitu[3][3] = 0;
	syukujitu[3][4] = 0;

	syukujitu[4][0] = 4;
	syukujitu[4][1] = 29;
	syukujitu[4][2] = 'みどりの日';
	syukujitu[4][3] = 0;
	syukujitu[4][4] = 0;

	syukujitu[5][0] = 5;
	syukujitu[5][1] = 3;
	syukujitu[5][2] = '憲法記念日';
	syukujitu[5][3] = 0;
	syukujitu[5][4] = 0;

	syukujitu[6][0] = 5;
	syukujitu[6][1] = 4;
	syukujitu[6][2] = '国民の休日';
	syukujitu[6][3] = 1;
	syukujitu[6][4] = 0;

	syukujitu[7][0] = 5;
	syukujitu[7][1] = 5;
	syukujitu[7][2] = 'こどもの日';
	syukujitu[7][3] = 0;
	syukujitu[7][4] = 0;

	syukujitu[8][0] = 7;
	syukujitu[8][1] = 20;
	syukujitu[8][2] = '海の日';
	syukujitu[8][3] = 0;
	syukujitu[8][4] = 0;

	syukujitu[9][0] = 9;
	syukujitu[9][1] = 15;
	syukujitu[9][2] = '敬老の日';
	syukujitu[9][3] = 0;
	syukujitu[9][4] = 0;

	syukujitu[10][0] = 9;
	syukujitu[10][1] = 23;
	syukujitu[10][2] = '秋分の日';
	syukujitu[10][3] = 0;
	syukujitu[10][4] = 0;

	syukujitu[11][0] = 10;
	syukujitu[11][1] = 0;
	syukujitu[11][2] = '体育の日';
	syukujitu[11][3] = 0;
	syukujitu[11][4] = '2,1';

	syukujitu[12][0] = 11;
	syukujitu[12][1] = 3;
	syukujitu[12][2] = '文化の日';
	syukujitu[12][3] = 0;
	syukujitu[12][4] = 0;

	syukujitu[13][0] = 11;
	syukujitu[13][1] = 23;
	syukujitu[13][2] = '勤労感謝の日';
	syukujitu[13][3] = 0;
	syukujitu[13][4] = 0;

	syukujitu[14][0] = 12;
	syukujitu[14][1] = 23;
	syukujitu[14][2] = '天皇誕生日';
	syukujitu[14][3] = 0;
	syukujitu[14][4] = 0;

	syukujitu[15][0] = 2;
	syukujitu[15][1] = 14;
	syukujitu[15][2] = 'バレンタインデー';
	syukujitu[15][3] = -1;
	syukujitu[15][4] = 0;

	syukujitu[16][0] = 3;
	syukujitu[16][1] = 3;
	syukujitu[16][2] = '雛祭り';
	syukujitu[16][3] = -1;
	syukujitu[16][4] = 0;

	syukujitu[17][0] = 3;
	syukujitu[17][1] = 14;
	syukujitu[17][2] = 'ホワイトデー';
	syukujitu[17][3] = -1;
	syukujitu[17][4] = 0;

	syukujitu[18][0] = 7;
	syukujitu[18][1] = 7;
	syukujitu[18][2] = '七夕';
	syukujitu[18][3] = -1;
	syukujitu[18][4] = 0;

	syukujitu[19][0] = 12;
	syukujitu[19][1] = 25;
	syukujitu[19][2] = 'クリスマス';
	syukujitu[19][3] = -1;
	syukujitu[19][4] = 0;

	syukujitu[20][0] = 5;
	syukujitu[20][1] = 0;
	syukujitu[20][2] = '母の日';
	syukujitu[20][3] = -1;
	syukujitu[20][4] = '2,0';

	syukujitu[21][0] = 6;
	syukujitu[21][1] = 0;
	syukujitu[21][2] = '父の日';
	syukujitu[21][3] = -1;
	syukujitu[21][4] = '3,0';

	hiniti = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
	nitiyou = 0;  doyou = 0; daini_han = 0;  yasumi_moji = "";  hurikae = 0; yasumi = 0;
	dotti = 0; demon = 0; nenn = 0; tuki = 0;
	my_style = "width = " + my_width + ",height = " + my_height + ",scrollbars = yes";
	function calendar(dore)
		{
		if(dore == 0)
			{
			jikoku = new Date();
			nenn = jikoku.getFullYear();  tuki = jikoku.getMonth();
			kyou=jikoku.getDate();
			}
		else if(dore == 2)
			{
			nenn = mado.document.form1.my_year.options[document.form1.my_year.selectedIndex].value;
			tuki = mado.document.form1.my_mon.selectedIndex;
			jikoku = new Date();
			kyou = jikoku.getDate();
			jikoku = new Date(nenn + "/" + tuki + "/" + kyou);
			}
		else {
			nenn = document.form1.my_year.options[document.form1.my_year.selectedIndex].value;
			tuki = document.form1.my_mon.selectedIndex;
			jikoku = new Date();
			kyou=jikoku.getDate();
			if(hiniti[tuki] < kyou){ kyou = hiniti[tuki]; }
			jikoku = new Date(nenn + "/" + tuki + "/" + kyou);
			}
		youbi = jikoku.getDay();
		my_week = 0;

		if(nenn % 4 == 0)hiniti[1] = 29;
		else hiniti[1] = 28;

		tuitati = new Date(nenn + "/" + (tuki + 1) + "/1");
		tuitati_youbi = tuitati.getDay();
		table_width = td_width * 7 + (3 * 6);
		kekka_moji = form_write();
		kekka_moji += '<input type="button" value="Click!" onClick="window.opener.dotti = 2; window.opener.calendar(2);">\n<\/form>\n\n';
		kekka_moji += '<div align="center">\n<strong>' + nenn + '/' + (tuki + 1) + '<\/strong>\n';
		kekka_moji += '<table border="1" width="' + table_width + '" cellpadding="2" bgcolor="' + table_bgcolor + '"><tr>';
		for(i = 0; i < youbis.length; i++ )
			{
			kekka_moji += '<th width="' + td_width + '" bgcolor="' + th_bgcolor + '">';
			if(i == 0)kekka_moji += '<font style="font-size:' + font_size + 'pt;" color="' + sunday_color + '" size="4">' + youbis[i];
			else if(i == 6)kekka_moji += '<font style="font-size:' + font_size + 'pt;" color="' + saturday_color + '" size="4">' + youbis[i];
			else kekka_moji += '<font style="font-size:' + font_size + 'pt;" size="4">' + youbis[i];
			kekka_moji += '<\/font><\/th>';
			}
		kekka_moji += '<\/tr><tr align="center" valign="top">';

		j = 1;
		for(i = 0; i < 7; i++ )
			{
			if(i < tuitati_youbi)
				kekka_moji += '<td width="' + td_width + '" height="' + td_height + '"><br><\/td>';
			else 
				{
				syukujitu_hyouji();
				daily_hyouji();
				daini_han = 1;
				j++;
				}

			yasumi_moji = "";
			yasumi = 0;
			if(hurikae == 1)hurikae++;
			else hurikae = 0;
			}
		kekka_moji += '<\/tr>';

		i = 0;
		while(j <= hiniti[tuki])
			{
			kekka_moji += '<tr align="center" valign = "top">';
			while(i < youbis.length + my_week)
				{
				if(j <= hiniti[tuki])
					{
					syukujitu_hyouji();
					daily_hyouji();
					j++;
					i++;
					}

				else 
					{
					kekka_moji += '<td width="' + td_width + '" height="' + td_height + '"><br><\/td>';
					 j++;
					 i++;
					 }

				yasumi_moji = "";
				yasumi = 0;
				if(hurikae == 1)hurikae++;
				else hurikae = 0;
				}

			kekka_moji += '<\/tr>';
			my_week += 7;
			}

		kekka_moji += '<\/table>\n<br>\n<form><input type="button" onClick="window.close();" value="閉じる"><\/form>\n<\/div>\n';
		kekka_moji += '<\/body><\/html>';

		mado = window.open("" , "my_win" , my_style);
		mado.document.open();
		mado.document.write(kekka_moji);
		mado.document.close();
		}

	function daily_hyouji()
		{
		kekka_moji += '<td width="' + td_width + '" height="' + td_height + '" valign="top"';
		if(hurikae == 2)kekka_moji += '><font style="font-size:' + font_size + 'pt;" color="' + sunday_color + '" size="4">';
		else if(j == kyou)kekka_moji += ' bgcolor="' + today_bgcolor + '"><font style="font-size:' + font_size + 'pt;" color="' + today_color + '" size="4">';
		else if(yasumi == 1 || j % 7 == nitiyou)kekka_moji += '><font style="font-size:' + font_size + 'pt;" color="' + sunday_color + '" size="4">';
		else if(j % 7 == doyou)kekka_moji += '><font style="font-size:' + font_size + 'pt;" color="' + saturday_color + '" size="4">';
		else kekka_moji += '><font style="font-size:' + font_size + 'pt;" size="4">';

		if(hurikae == 2)kekka_moji += j + '<\/font><br><font size="1" color="' + sunday_color + '">' + hurikae_moji + '<\/font><\/td>';
		else kekka_moji += j + '<\/font>' + yasumi_moji + '<\/td>';
		}

	function syukujitu_hyouji()
		{
		doyou = 7 - tuitati_youbi;
		nitiyou = 7 - tuitati_youbi + 1;
		if(doyou == 7){ doyou -= 7; nitiyou -= 7; }
		if(nitiyou == 7){nitiyou -= 7;}

		for(l = 0; l < syukujitu.length; l++)
			{
			if(eval(tuki + 1) == syukujitu[l][0])
				{
				if(j == syukujitu[l][1])
					{
					if(syukujitu[l][3] > -1)
						{
						yasumi_moji = '<br><font size="1" color="' + sunday_color + '">' + syukujitu[l][2] + '<\/font>';
						yasumi = 1;
						}
					else 
						{
						yasumi_moji = '<br><font size="-1" class="SmallTxt">' + syukujitu[l][2] + '<\/font>';
						yasumi = 0;
						}
					syuku_han = 7 - tuitati_youbi + 1;
					if(syukujitu[l][3] == 0 && j % 7 == nitiyou)hurikae = 1;
					}
				else if(syukujitu[l][1] == 0)
					{
					datas = new Array();
					datas = syukujitu[l][4].split(",");
					if(tuitati_youbi > 0)syuku_han = 7 - tuitati_youbi + eval(datas[1]) + 1;
					else syuku_han = eval(datas[1]) + 1;
					syuku_han += (eval(datas[0]) - 1) * 7;
					if(j == syuku_han)
						{
						if(syukujitu[l][3] > -1)
							{
							yasumi_moji = '<br><font size="1" color="' + sunday_color + '">' + syukujitu[l][2] + '<\/font>';
							yasumi = 1;
							}
						else 
							{
							yasumi_moji = '<br><font size="-1" class="SmallTxt">' + syukujitu[l][2] + '<\/font>';
							yasumi = 0;
							}
						}
					}
				}
			}
		}

	function form_write()
		{
		moji = '<html><head><title>カレンダー<\/title><\/head>';
		moji += '<body text="'  +  TEXT_COLOR  +  '" bgcolor="'  +  BG_COLOR  +  '" link="'  +  LINK_COLOR  +  '" vlink="'  +  VLINK_COLOR  +  '" alink="'  +  ALINK_COLOR  +  '">';
		moji += '<form name="form1">\n<select name = "my_year">\n';
		if(dotti == 0)
			{
			jikoku = new Date();
			nenn = jikoku.getFullYear();
			tuki = jikoku.getMonth();
			}
		else if(dotti == 1){
			nenn = eval(document.form1.my_year.options[document.form1.my_year.selectedIndex].value);
			tuki = document.form1.my_mon.selectedIndex;
			}
		else if(dotti == 2){
			nenn = eval(mado.document.form1.my_year.options[mado.document.form1.my_year.selectedIndex].value);
			tuki = mado.document.form1.my_mon.selectedIndex;
			}
		for(i = nenn + 10; i > nenn - 10; i--)
			{
			if(i == nenn)moji += '<option value="' + i + '" selected>' + i;
			else moji += '<option value="' + i + '">' + i;
			}
		moji += '\n<\/select>年\n<select name = "my_mon">\n';
		for(i = 0; i < 12; i++ )
			{
			if(i == tuki)moji += '<option value="' + i + '" selected>' + (i + 1);
			else moji += '<option value="' + i + '">' + (i + 1);
			}
		moji += '\n<\/select>月\n';

		return moji;
		}

//-->
</script>

</head>

<body>

<script language="JavaScript" type="text/javascript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp

	document.write(form_write(0));

//-->
</script>

<input type="button" value="Click!" onClick="dotti = 1;calendar(1);">
</form>

</body></html>


[ 解説 ]

ソースを丸ごとコピーペーストして下さい。
変更可能箇所はソース内に注意書きをしてありますので、 それに沿ってご変更下さい。


バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.