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