今月のカレンダーを表示するスクリプトです。
土曜を青色に、日曜を赤色、当日を目立つように配色しています。
配色は好きなように変更できます。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」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>
[ 解説 ]
ソースを丸ごとコピーペーストして下さい。
変更可能箇所はソース内に注意書きをしてありますので、
それに沿ってご変更下さい。
|
