WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)

■ JavaScript - サンプル集(257種類) - パーツ
   - カレンダーVer3(表示月選択可能)

今月のカレンダーを表示するスクリプトVer3です。
機能は、 ・祝日表示
・土曜を青色に、日曜を赤色、当日を目立つように配色
・配色は好きな色を指定可能
・祝日以外のクリスマスや雛祭りなどの記念日もフォロー
です。

また、表示する月を選択できます。
ページが読み込まれた際は、その月のカレンダーが表示されます。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」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;

	//表示位置
	x_iti=300;
	y_iti=300;


	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;
	function calendar(dore)
		{
		if(dore==0)
			{
			jikoku=new Date();
			nenn=jikoku.getFullYear();  tuki=jikoku.getMonth();
			kyou=jikoku.getDate();
			}
		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();

		kekka_moji='<strong>'+nenn+'/'+(tuki+1)+'<\/strong>';
		table_width=td_width*7+(3*6);
		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>';

		if(document.layers){
			document.layers["lay0"].moveTo(x_iti,y_iti);
			document.layers["lay0"].document.open();
			document.layers["lay0"].document.write(kekka_moji);
			document.layers["lay0"].document.close();}

		else if((document.getElementById) && (!document.all)){
			document.getElementById("lay0").innerHTML=kekka_moji;}

		else if(document.all){
			document.all("lay0").innerHTML=kekka_moji;}
		}

	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;}
						}
					}
				}
			}
		}

	if(document.layers)
		{document.write('<style type="text/css">span{position:absolute;visibility:visible;}</style>');}
	else if((document.getElementById) && (!document.all))
		{document.write('<style type="text/css">span{position:absolute;visibility:visible;}</style>');}
	else if(document.all)
		{document.write('<style type="text/css">span{position:relative;visibility:visible;}</style>');}

//-->
</script>

</head>

<body onLoad="calendar(0);">

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

		moji='<form name="form1"><select name="my_year">';
		jikoku=new Date();  nenn=jikoku.getFullYear();  tuki=jikoku.getMonth();
		for(i=nenn+10; i>nenn-10; i--)
			if(i==nenn)moji+='<option value="'+i+'" selected>'+i;
			else moji+='<option value="'+i+'">'+i;
		moji+='<\/select>年<select name="my_mon">';
		for(i=0; i<12; i++)
			if(i==tuki)moji+='<option value="'+i+'" selected>'+(i+1);
			else moji+='<option value="'+i+'">'+(i+1);
		moji+='<\/select>月';
		document.write(moji);

	//-->
	</script>

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

<p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><br><br>

</body></html>


[ 解説 ]

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


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

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