|
|
|
11/22(Fri) 03:18
 万年カレンダー(2)［小ウィンドウ表示＆任意の年/月表示］
★「おしらせ」★
○「祝日法」改正等に伴うカレンダー関連の変更については、こちらをご参照ください。
■(00.02.01)月選択をセレクター方式にアップ。長い月の最終日(1/31、3/31など)で短い月指定(2月、4月など)をすると月がずれる不具合を修正。
■(99.11.05)２０００年以降の成人の日/体育の日(第２月曜日)対応、振替休日の自動計算
■(99.05.09)２０００年対応ルーチンの追加
このカレンダーを応用した、カレンダー付Ｗｅｂ日記帳（Personal-Diary）があっぽー庵さんの自作ＣＧＩ配布コーナで入手できます。以下はあっぽー庵さんの説明の引用です。
日付、ログの編集、過去ログ自動生成など、WebDiaryとして考えうるほぼ全ての機能を満載しました。カレンダーを表示させ、見たい日にちを選択するモードと、月ごとにまとめて表示するモードの２つのどちらかを選択することができるのもこのスクリプトの特長です。また、日付を選択して日記を書くことができます。
万年カレンダー(1)は、同一ページ内にカレンダーを表示しますが、このカレンダーは以下の機能強化版です。
- 小ウィンドウを開き表示しますので、好きな時に見ることができます。
- 見たい年と月を直接記入して再表示ができます。例えば、あなたの誕生日は何曜日かなどを調べたり、スケジュール作成等に利用できます。
- 表示方法はいくつかの方法がありますが、私のページで使ってる方法のサンプルを示します。
（１）画像にマウスが当たると自動的に表示する----
■スクリプトのコピー＆貼りつけ
下のスクリプトをコピーし、<HEAD>と</HEAD>のなかに貼りつけます。
- ハッピーマンディ、振替休日の自動計算機能追加にともないkyuDaysの配列内位置と休日月日は固定です。この行は変更しないで下さい。
- 特別な日(例えばメーデーや誕生日など)を追加したい場合は、tokuDays に "0501","1225" のように文字列で追加します。
- 表示色の優先度は 本日＞特別な日＞祭日＞日、土になります。
【注意】広告バナーが自動的に表示されるプロバイダー(Geocitiesやfreewebなど)をご利用のユーザでスクリプトエラーが起こる時は下記の対処をして下さい。広告の挿入が、最初に見つけた<BODY>タグの直後にされるためスクリプトエラーになります。
広告バナーの表示・非表示選択ができるユーザ。Geocitiesの場合はジオガイドマネージャーの「ジオガイドの調整」で、スクリプトを設置したファイルのジオガイドを表示しない設定に変更します。
広告バナーの表示・非表示選択ができないユーザ。スクリプト本体を<HEAD>部ではなく<BODY>部(BODYタグの次行)に移動してください。
|
<![CDATA[
<script language="JavaScript">
<!--
//万年暦(小ウィンドウ表示) by「菊池さん」 <http://kikuchisan.net/>
function koyomi()
{
var calendarWindow = window.open("","calendarWin","height=290,width=200");
var yy=eval(calendarWindow.document.MyForm.yyy.value);
var mm=eval(calendarWindow.document.MyForm.mmm.options
[calendarWindow.document.MyForm.mmm.selectedIndex].value);
var dd=eval(calendarWindow.document.MyForm.ddd.value);
if (yy <= 0) { yy = 1;
alert("このカレンダは紀元前の計算が苦手です。西暦1年に設定しました"); }
if (yy >= 10000) { yy = 9999;
alert("このカレンダは西暦1万年を超えると考えてしまいます。西暦9999年に設定しました");}
if (yy == null)
{ yy = 2000; alert("「年」の入力がありません。西暦2000年に設定しました"); }
if (mm == null)
{ mm = 1; alert("「月」の入力がありません。1月に設定しました"); }
if (mm < 1 || mm > 12)
{ mm = 1; alert("「月」の指定が1月以下か12月を超えてます。1月に設定しました"); }
if (dd == null) dd = 1;
monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
kyuDays = new Array("0101","0115","0211","0321","0429","0503","0504","0505"
,"0720","0915","0923","1010","1103","1123","1223"); //休日設定(変更出来ません)
tokuDays = new Array("0518"); //特別日設定
year = yy;
month = mm;
if (yy<100) yy = yy+10000; //西暦1〜99年の処理
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0))
{ monthDays[1] = 29; } // うるう年計算
if(year >= 1980 && year <= 2099) {
kyuDays[3] = "03" + Math.floor(20.8431 + 0.242194 * (year - 1980)
- Math.floor((year - 1980)/4)); // 春分の日を求める（1980-2099まで）
kyuDays[10] = "09" + Math.floor(23.2488 + 0.242194 * (year - 1980)
- Math.floor((year - 1980)/4)); // 秋分の日を求める（1980-2099まで）
}
if (dd > monthDays[mm-1]) dd = monthDays[mm-1];
mydate = new Date();
mydate.setDate(dd);
mydate.setMonth(mm-1);
mydate.setYear(yy);
var today = new Date(mydate);
var thisDay;
thisDay = today.getDate();
nDays = monthDays[today.getMonth()];
firstDay = today;
firstDay.setDate(1);
startDay = firstDay.getDay();
// 2000年以降の成人の日/体育の日(第２月曜日)の計算
if (year >= 2000 &&(month == 1 || month == 10)) {
if (startDay <= 1) happyMon = 7 + (2 - startDay);
else happyMon = 14 - (startDay - 2);
if (happyMon < 10) happyMon = "0" + happyMon;
if (month == 1) kyuDays[1] = "01" + happyMon;
else kyuDays[11] = "10" + happyMon;
}
// 2003年以降の海の日/敬老の日(第３月曜日)の計算
if (year >= 2003 && (month == 7 || month == 9)) {
if (startDay <= 1) happyMon = 14 + (2 - startDay);
else happyMon = 21 - (startDay - 2);
if (happyMon < 10) happyMon = "0" + happyMon;
if (month == 7) kyuDays[8] = "07" + happyMon;
else kyuDays[9] = "09" + happyMon;
}
// 2007年以降は5/3,4のいずれかが日曜のときは5/6は振替休日
// (5/5が日曜のケースは「振替休日の自動計算」で計算)
if (year >= 2007 && month == 5) {
for (i = 3; i <= 4; i++) {
zday = (year + parseInt(year/4) - parseInt(year/100) + parseInt(year/400)
+ parseInt((13*month + 8)/5) + i ) % 7;
if (zday == 0) {
kyuDays[kyuDays.length] = "0506";
}
}
}
// 2007年以降は前後が祝日の場合の平日は国民の休日となる(敬老の日と秋分の日)
// 2150年までは秋分の日が必ず水曜日になることから判定
if (year >= 2007 && month == 9) {
hday = kyuDays[10].substring(2,4)*1;
zday = (year + parseInt(year/4) - parseInt(year/100) + parseInt(year/400)
+ parseInt((13*month + 8)/5) + hday) % 7;
if (zday == 3) {
hday = hday - 1;
kyuDays[kyuDays.length] = "09" + hday;
}
}
// 2016年以降の山の日の設定、東京オリンピック年(2020年/2021年)は祝日移動で対処
if (year >= 2016 && year != 2020 && year != 2021 && month == 8) { kyuDays[kyuDays.length] = "0811"; }
// 2019年天皇即位の日の設定（2019年限定）
if (year == 2019 && (month == 4 || month == 5 || month == 10)) {
kyuDays[kyuDays.length] = "0430";
kyuDays[kyuDays.length] = "0501"; //天皇即位の日
kyuDays[kyuDays.length] = "0502";
kyuDays[kyuDays.length] = "1022"; //即位礼正殿の儀
}
// 2019年5月以降の天皇誕生日を12/23から2/23に変更
if ((year >= 2019 && month >= 5) || year >= 2020) {
kyuDays[14] = "0223";
}
// 2020年のみ東京オリンピックによる祝日移動（2020年限定）
if (year == 2020) {
kyuDays[8] = "0723"; //海の日（月曜から移動）
kyuDays[11] = "0724"; //スポーツの日（10月から移動）
kyuDays[kyuDays.length] = "0810"; //山の日（11日から移動）
}
// 2021年のみ東京オリンピック1年延期による祝日移動（2021年限定）
if (year == 2021) {
kyuDays[8] = "0722"; //海の日（月曜から移動）
kyuDays[11] = "0723"; //スポーツの日（10月から移動）
kyuDays[kyuDays.length] = "0808"; //山の日（11日から移動）
}
skip = 0;
for (i = 0; i < kyuDays.length; i++) { // 振替休日の自動計算
hmon = kyuDays[i].substring(0,2);
if (hmon == month) {
hday = kyuDays[i].substring(2,4)*1;
if (hmon <= 2) { zyear = year - 1; zmon = parseInt(hmon) + 12; }
else { zyear = year; zmon = hmon; }
zday = (zyear + parseInt(zyear/4) - parseInt(zyear/100) + parseInt(zyear/400)
+ parseInt((13*zmon + 8)/5) + hday ) % 7;
if (zday == 0) {
hday = hday + 1;
if (hday < 10) { hday = "0" + hday;}
for (i = 0; i < kyuDays.length; i++) { //振替休日が祝日の場合スキップ
if (kyuDays[i] == (hmon + hday)) { skip = 1; }
}
if (skip == 0) {
kyuDays[kyuDays.length] = hmon + hday;
}
}
}
}
doc ="<CENTER><TABLE bgcolor=white border=1 bordercolor=silver cellpadding=2>";
doc+="<TR bgcolor=#0000a0><TH COLSPAN=7><FONT color=white>";
doc+="西暦" + year + "年 ";
doc+=month + "月</FONT></TH></TR>";
doc+="<TR bgcolor=#f7ffa0 align=center><TD><FONT color=red>日</FONT></TD>";
doc+="<TD><FONT color=black>月</FONT></TD><TD><FONT color=black>火</FONT></TD>";
doc+="<TD><FONT color=black>水</FONT></TD><TD><FONT color=black>木</FONT></TD>";
doc+="<TD><FONT color=black>金</FONT></TD><TD><FONT color=blue>土</FONT></TD></TR>";
doc+="<TR bgcolor=ivory>";
column = 0;
for (i=0; i<startDay; i++)
{
doc+="<TD> </TD>";
column++;
}
for (i=1; i<=nDays; i++)
{
if (year==dtyear && month==dtmonth && i==dtday) { //本日の背景色変更
doc+="<TD ALIGN=center bgcolor=cyan><b>";
} else { doc+="<TD ALIGN=center><b>"; }
weekDay = today;
weekDay.setDate(i);
if (weekDay.getDay() == 0) doc+="<FONT COLOR=red>";
else if (weekDay.getDay() == 6) doc+="<FONT COLOR=blue>";
else doc+="<FONT COLOR=black>";
for (j=0; j<kyuDays.length; j++) //休日判定
{
if (today.getMonth()+1 == kyuDays[j].substring(0,2)
&& i == kyuDays[j].substring(2,4)*1)
doc+="<FONT COLOR=red>";
}
for (j=0; j<tokuDays.length; j++) //特別日判定
{
if (today.getMonth()+1 == tokuDays[j].substring(0,2)
&& i == tokuDays[j].substring(2,4)*1) {
doc+="<a href='../tokubetu/" + tokuDays[j].substring(0,4) + ".html'>";
doc+="<FONT COLOR=magenta>";
}
}
doc+=i;
doc+="</FONT></a></b></TD>"
column++;
if (column == 7 && i != nDays)
{
doc+="</TR><TR bgcolor=ivory>";
column = 0;
}
}
for (i=0; column<7; i++){
doc+="<TD> </TD>";
column++;
}
doc+="</TR></TABLE></CENTER>";
// 表示
calendarWindow.document.write("<HTML><HEAD><TITLE>万年カレンダー</TITLE>");
calendarWindow.document.write("</HEAD><BODY BGCOLOR=white>");
calendarWindow.document.write(doc);
if (sw == 0) {
calendarWindow.document.write("<form><input type='button' value='再表\示'");
calendarWindow.document.write(" onClick='opener.koyomi()'>");
calendarWindow.document.write("<INPUT TYPE='button' VALUE='閉じる'");
calendarWindow.document.write(" onClick='window.close()'><br>");
calendarWindow.document.write("<font color=blue size=-1>あなたの誕生日は何曜日？<br>");
calendarWindow.document.write("見たい年と月を直接入力して<br>再表\示できます");
calendarWindow.document.write("</font></form>");
sw = 1;
} else {
calendarWindow.document.write("<center><form><INPUT TYPE='button' ");
calendarWindow.document.write("VALUE=' 戻る ' onClick='opener.renewkoyomi()'>");
calendarWindow.document.write("<INPUT TYPE='button' VALUE='閉じる' ");
calendarWindow.document.write("onClick='window.close()'></form></center>");
}
calendarWindow.document.write("</BODY></HTML>");
}
function renewkoyomi() { //「戻る」ボタン処理
var calendarWindow = window.open("","calendarWin","height=310,width=200");
calendarWindow.document.open();
calendarWindow.document.close();
dispkoyomi();
}
function dispkoyomi() {
sw = 0;
dd = new Date();
yy = dd.getYear(); if (yy < 2000) yy = yy + 1900; dtyear = yy;
mm = dd.getMonth() + 1; dtmonth = mm;
dd = dd.getDate(); dtday = dd;
mons= new Array("01","02","03","04","05","06","07","08","09","10","11","12");
monn= new Array("1","2","3","4","5","6","7","8","9","10","11","12");
var calendarWindow = window.open("","calendarWin","height=310,width=200");
if (calendarWindow != null) {
calendarWindow.document.write("<CENTER><form name='MyForm'>西暦 ");
calendarWindow.document.write("<input type='text' name='yyy' value='");
calendarWindow.document.write( yy + "' size=5>年<select name='mmm'>");
for (i = 0; i < monn.length; i++) {
if (monn[i] == mm)
{ calendarWindow.document.write("<option value="+mons[i]+" selected>"+monn[i]); }
else
{ calendarWindow.document.write("<option value="+mons[i]+">"+monn[i]);}
}
calendarWindow.document.write("</select>月");
calendarWindow.document.write("<input type='hidden' name='ddd' value=1>");
calendarWindow.document.MyForm.yyy.value = yy;
calendarWindow.document.MyForm.mmm.options
[calendarWindow.document.MyForm.mmm.selectedIndex].value = mm;
calendarWindow.document.MyForm.ddd.value = dd;
koyomi();
calendarWindow.document.write("</form></CENTER>");
calendarWindow.document.close();
}
}
// -->
</script>
]]>
|
■ <BODY>部の好きな場所にカレンダー表示の文を記述します。
（１）画像にマウスが当たると自動的に表示する時は、
|
<![CDATA[
<A HREF='JavaScript:;' onMouseOver='dispkoyomi();return true;'>
<IMG SRC="../gif/banner.gif" WIDTH=88 HEIGHT=31 ALT="banner" BORDER=0></A>
]]>
|
(注)A HREF='JavaScript:;'のJavaScript:;をURLに置き換えると、画像クリックで指定したURLへジャンプさせることもできます。
（２）ボタンを押すと表示する時は、
|
<![CDATA[
<form><input type="button" value="カレンダ表示" onclick="dispkoyomi()"></form>
]]>
|
■ ＜改造＞特別日をクリックすると新しいページをオープンするようにするには。
- 下の赤字部分を追加します
if (today.getMonth()+1 == tokuDays[j].substring(0,2) && i == tokuDays[j].substring(2,4)*1) doc+="<a href='" + tokuDays[j].substring(0,4) + ".html'><FONT COLOR=\"#FFBF00\">";
}
if (i == thisDay) doc+="<FONT COLOR=lime>";
doc+=i;
doc+="</FONT></a></B>"
- mmdd.htmlというファイルを用意し、同じフォルダに置きます。mmddは特別日の月日です。例えば3月4日だと0304.htmlになります。
|
|
