今月のカレンダーを表示するスクリプト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>
[ 解説 ]
ソースを丸ごとコピーペーストして下さい。
変更可能箇所はソース内に注意書きをしてありますので、
それに沿ってご変更下さい。
|
