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

■ JavaScript - サンプル集(257種類) - パーツ
   - カレンダー

今月のカレンダーを表示するスクリプトです。
土曜を青色に、日曜を赤色、当日を目立つように配色しています。
配色は好きなように変更できます。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」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('日','月','火','水','木','金','土');

	//日曜日の文字色
	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;

	hiniti=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
	function calendar()
		{
		jikoku=new Date();
		nenn=jikoku.getFullYear();
		tuki=jikoku.getMonth();
		kyou=jikoku.getDate();
		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();

		document.write('<table border=<1< cellpadding=<2< bgcolor=<'+table_bgcolor+'<><tr>');
		for(i=0; i<youbis.length; i++)
			{
			if(i==0)document.write('<th width=<'+td_width+'<bgcolor=<'+th_bgcolor+'<><font style=<font-size:'+font_size+'pt;< color=<'+sunday_color+'<>'+youbis[i]+'<\/font><\/th>');
			else if(i==6)document.write('<th width=<'+td_width+'< bgcolor=<'+th_bgcolor+'<><font style=<font-size:'+font_size+'pt;< color=<'+saturday_color+'<>'+youbis[i]+'<\/font><\/th>');
			else document.write('<th width=<'+td_width+'< bgcolor=<'+th_bgcolor+'<>'+youbis[i]+'<\/th>');
			}
		document.write('<\/tr><tr align=<center< valign=<top<>');

		j=1;
		for(i=0; i<7; i++)
			{
			if(i<tuitati_youbi)document.write('<td width=<'+td_width+'< height=<'+td_height+'<><br><\/td>');
			else 
				{
				if(j==kyou)document.write('<td width=<'+td_width+'< height=<'+td_height+'< bgcolor=<'+today_bgcolor+'<><font style=<font-size:'+font_size+'pt;< color=<'+today_color+'<>'+j+'<\/font><\/td>');
				else if(i==0)document.write('<td width=<'+td_width+'< height=<'+td_height+'<><font style=<font-size:'+font_size+'pt;< color=<'+sunday_color+'<>'+j+'<\/font><\/td>');
				else if(i==6)document.write('<td width=<'+td_width+'< height=<'+td_height+'<><font style=<font-size:'+font_size+'pt;< color=<'+saturday_color+'<>'+j+'<\/font><\/td>');
				else document.write('<td width=<'+td_width+'< height=<'+td_height+'<><font style=<font-size:'+font_size+'pt;<>'+j+'<\/font><\/td>');
				doyou=j; nitiyou=doyou+1; j++;
				}
			}
		document.write('<\/tr>');

		i=0;
		while(j<=hiniti[tuki])
			{
			document.write('<tr align=<center< valign=<top<>');
			while(i<youbis.length+my_week)
				{
				 if(j<=hiniti[tuki])
					{
					if(doyou==7){doyou=0; nitiyou=1}
					else if(doyou==6){doyou=6; nitiyou=0}
					if(j==kyou)document.write('<td width=<'+td_width+'< height=<'+td_height+'< bgcolor=<'+today_bgcolor+'<><font style=<font-size:'+font_size+'pt;< color=<'+today_color+'<>'+j+'<\/font><\/td>');
					else if(j%7==nitiyou)document.write('<td width=<'+td_width+'< height=<'+td_height+'<><font style=<font-size:'+font_size+'pt;< color=<'+sunday_color+'<>'+j+'<\/font><\/td>');
					else if(j%7==doyou)document.write('<td width=<'+td_width+'< height=<'+td_height+'<><font style=<font-size:'+font_size+'pt;< color=<'+saturday_color+'<>'+j+'<\/font><\/td>');
					else document.write('<td width=<'+td_width+'< height=<'+td_height+'<><font style=<font-size:'+font_size+'pt;<>'+j+'<\/td>');
					j++; i++;
					}
				 else 
				 	{
				 	document.write('<td width=<'+td_width+'< height=<'+td_height+'<><br><\/td>');
				 	j++; i++;
				 	}
				 }
			document.write('<\/tr>');
			my_week+=7;
			}

		document.write('<\/table>');
		}

//-->
</script>

</head>

<body>

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

	calendar();

//-->
</script>

</body></html>


[ 解説 ]

ソースを丸ごとコピーペーストして下さい。

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


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

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