自動表示のスケジュール型カレンダーです。祝祭日もきちんと表示できます。

まず HTML ファイルのヘッダ部分に次のソースを入れます。

<SCRIPT Language="JavaScript">

<!--

Txt=""; //ソースの初期化

schedule=new Array();

yotei=new Array();

//ここからスケジュールを設定

schedule[0]="2005/1/1";

yotei[0]="初詣";

schedule[1]="2005/1/5";

yotei[1]="御用始め";

schedule[2]="2005/1/12";

yotei[2]="スキー記念日";

schedule[3]="2005/1/26";

yotei[3]="文化財防火デー";

schedule[4]="2005/2/3";

yotei[4]="節分";

schedule[5]="2005/2/7";

yotei[5]="北方領土の日";

schedule[6]="2005/2/14";

yotei[6]="バレンタインデー";

schedule[7]="2005/2/23";

yotei[7]="富士山の日";

schedule[8]="2005/3/3";

yotei[8]="ひな祭り";

schedule[9]="2005/3/8";

yotei[9]="国際婦人デー";

schedule[10]="2005/3/14";

yotei[10]="ホワイトデー";

schedule[11]="2005/3/20";

yotei[11]="動物愛護デー";

schedule[12]="2005/4/1";

yotei[12]="エイプリルフール";

schedule[13]="2005/4/7";

yotei[13]="世界保健デー";

schedule[14]="2005/4/16";

yotei[14]="女子マラソンの日";

schedule[15]="2005/4/24";

yotei[15]="盲導犬の日";

schedule[16]="2005/5/1";

yotei[16]="メーデー";

schedule[17]="2005/5/5";

yotei[17]="端午の節句";

schedule[18]="2005/5/8";

yotei[18]="母の日";

schedule[19]="2005/5/31";

yotei[19]="世界禁煙デー";

schedule[20]="2005/6/1";

yotei[20]="気象記念日";

schedule[21]="2005/6/10";

yotei[21]="時の記念日";

schedule[22]="2005/6/19";

yotei[22]="父の日";

schedule[23]="2005/6/27";

yotei[23]="女性雑誌の日";

schedule[24]="2005/7/6";

yotei[24]="サラダ記念日";

schedule[25]="2005/7/11";

yotei[25]="世界人口デー";

schedule[26]="2005/7/21";

yotei[26]="勤労青少年の日";

schedule[27]="2005/7/29";

yotei[27]="アマチュア無線の日";

schedule[28]="2005/8/6";

yotei[28]="広島平和記念日";

schedule[29]="2005/8/9";

yotei[29]="長崎原爆の日";

schedule[30]="2005/8/15";

yotei[30]="終戦記念日";

schedule[31]="2005/8/28";

yotei[31]="気象予報士の日";

schedule[32]="2005/9/2";

yotei[32]="宝くじの日";

schedule[33]="2005/9/8";

yotei[33]="国際識字デー";

schedule[34]="2005/9/20";

yotei[34]="動物愛護週間";

schedule[35]="2005/9/28";

yotei[35]="パソコンの日";

schedule[36]="2005/10/6";

yotei[36]="国際協力の日";

schedule[37]="2005/10/10";

yotei[37]="目の愛護デー";

schedule[38]="2005/10/16";

yotei[38]="世界食料デー";

schedule[39]="2005/10/27";

yotei[39]="読書週間";

schedule[40]="2005/11/1";

yotei[40]="計量記念日";

schedule[41]="2005/11/4";

yotei[41]="ユネスコ憲章記念日";

schedule[42]="2005/11/11";

yotei[42]="世界平和記念日";

schedule[43]="2005/11/27";

yotei[43]="ノーベル賞制定記念日";

schedule[44]="2005/12/3";

yotei[44]="カレンダーの日";

schedule[45]="2005/12/10";

yotei[45]="世界人権デー";

schedule[46]="2005/12/25";

yotei[46]="クリスマス";

schedule[47]="2005/12/31";

yotei[47]="大晦日";

schedule[48]="2006/1/5";

yotei[48]="小寒";

schedule[49]="2006/1/7";

yotei[49]="七草";

schedule[50]="2006/1/11";

yotei[50]="鏡開き";

schedule[51]="2006/1/20";

yotei[51]="大寒";

schedule[52]="2006/2/4";

yotei[52]="立春";

schedule[53]="2006/2/8";

yotei[53]="事始め";

schedule[54]="2006/2/9";

yotei[54]="旧正月";

schedule[55]="2006/2/18";

yotei[55]="雨水";

schedule[56]="2006/3/5";

yotei[56]="啓蟄";

schedule[57]="2006/3/17";

yotei[57]="彼岸入り";

schedule[58]="2006/3/20";

yotei[58]="春分の日";

schedule[59]="2006/3/23";

yotei[59]="彼岸明け";

schedule[60]="2006/4/5";

yotei[60]="清明";

schedule[61]="2006/4/8";

yotei[61]="花まつり";

schedule[62]="2006/4/17";

yotei[62]="土用";

schedule[63]="2006/4/20";

yotei[63]="穀雨";

schedule[64]="2006/5/2";

yotei[64]="八十八夜";

schedule[65]="2006/5/5";

yotei[65]="立夏";

schedule[66]="2006/5/8";

yotei[66]="旧4月1日";

schedule[67]="2006/5/21";

yotei[67]="小満";

schedule[68]="2006/6/5";

yotei[68]="芒種";

schedule[69]="2006/6/11";

yotei[69]="入梅";

schedule[70]="2006/6/21";

yotei[70]="夏至";

schedule[71]="2006/6/30";

yotei[71]="大祓";

schedule[72]="2006/7/7";

yotei[72]="小暑";

schedule[73]="2006/7/15";

yotei[73]="盆";

schedule[74]="2006/7/23";

yotei[74]="大暑";

schedule[75]="2006/7/28";

yotei[75]="土用の丑";

schedule[76]="2006/8/2";

yotei[76]="土用二の丑";

schedule[77]="2006/8/7";

yotei[77]="立秋";

schedule[78]="2006/8/23";

yotei[78]="処暑";

schedule[79]="2006/8/31";

yotei[79]="二百十日";

schedule[80]="2006/9/7";

yotei[80]="白露";

schedule[81]="2006/9/18";

yotei[81]="十五夜";

schedule[82]="2006/9/23";

yotei[82]="秋分の日";

schedule[83]="2006/9/26";

yotei[83]="彼岸明け";

schedule[84]="2006/10/8";

yotei[84]="寒露";

schedule[85]="2006/10/15";

yotei[85]="十三夜";

schedule[86]="2006/10/20";

yotei[86]="土用";

schedule[87]="2006/10/23";

yotei[87]="霜降";

schedule[88]="2006/11/7";

yotei[88]="立冬";

schedule[89]="2006/11/11";

yotei[89]="炉開き";

schedule[90]="2006/11/15";

yotei[90]="七五三";

schedule[91]="2006/11/22";

yotei[91]="小雪";

schedule[92]="2006/12/7";

yotei[92]="大雪";

schedule[93]="2006/12/13";

yotei[93]="すす払い";

schedule[94]="2006/12/22";

yotei[94]="冬至";

schedule[95]="2006/12/31";

yotei[95]="除夜";

holiday=new Array();

saijitsu=new Array();

//ここから祝祭日を設定

holiday[0]="2005/1/1";

saijitsu[0]="元日";

holiday[1]="2005/1/10";

saijitsu[1]="成人の日";

holiday[2]="2005/2/11";

saijitsu[2]="建国記念の日";

holiday[3]="2005/3/20";

saijitsu[3]="春分の日";

holiday[4]="2005/3/21";

saijitsu[4]="振替休日";

holiday[5]="2005/4/29";

saijitsu[5]="みどりの日";

holiday[6]="2005/5/3";

saijitsu[6]="憲法記念日";

holiday[7]="2005/5/4";

saijitsu[7]="国民の休日";

holiday[8]="2005/5/5";

saijitsu[8]="こどもの日";

holiday[9]="2005/7/18";

saijitsu[9]="海の日";

holiday[10]="2005/9/19";

saijitsu[10]="敬老の日";

holiday[11]="2005/9/23";

saijitsu[11]="秋分の日";

holiday[12]="2005/10/10";

saijitsu[12]="体育の日";

holiday[13]="2005/11/3";

saijitsu[13]="文化の日";

holiday[14]="2005/11/23";

saijitsu[14]="勤労感謝の日";

holiday[15]="2005/12/23";

saijitsu[15]="天皇誕生日";

holiday[16]="2003/1/1";

saijitsu[16]="元日";

holiday[17]="2005/1/12";

saijitsu[17]="振替休日";

holiday[18]="2006/1/9";

saijitsu[18]="成人の日";

holiday[19]="2006/2/11";

saijitsu[19]="建国記念の日";

holiday[20]="2006/3/21";

saijitsu[20]="春分の日";

holiday[21]="2006/4/29";

saijitsu[21]="みどりの日";

holiday[22]="2006/5/3";

saijitsu[22]="憲法記念日";

holiday[23]="2006/5/4";

saijitsu[23]="国民の休日";

holiday[24]="2006/5/5";

saijitsu[24]="こどもの日";

holiday[25]="2006/7/17";

saijitsu[25]="海の日";

holiday[26]="2006/9/18";

saijitsu[26]="敬老の日";

holiday[27]="2006/9/23";

saijitsu[27]="秋分の日";

holiday[28]="2006/10/9";

saijitsu[28]="体育の日";

holiday[29]="2006/11/3";

saijitsu[29]="文化の日";

holiday[30]="2006/11/23";

saijitsu[30]="勤労感謝の日";

holiday[31]="2006/12/23";

saijitsu[31]="天皇誕生日";

Now=new Date();//今日の年月日曜日を取得

with(Now)

{

YY = getYear();

MM=getMonth()+1;

DD=getDate();

WW=getDay();

}

A="20";

if(YY < 90)

{

A="20";

YY = A+YY;

}

else if(YY < 99)

{

A="19";

YY = A+YY;

}

else if(YY < 1900)

{

A="20";

YY = 1900+YY;

}

Yoobi=new Array("日","月","火","水","木","金","土");

function Nissu(a, b) {//指定月の日数を取得する関数

if(b==2)

{

if(a % 4==0)

{

if(a % 100==0 && a % 400!=0) return 28;

else return 29;

}

else return 28;

}

else if(b==4 || b==6 || b==9 || b==11) return 30;

else return 31;

}

function Calender(Tuki,annus) { //カレンダーを作成する関数

First=0;

Txt+="<DIV align='center'><FONT size=5>"+annus+"年"+Tuki+"月</FONT>";

Txt+="<BR><TABLE border=1 cellspacing=0 bordercolor='#000000' bgcolor='#ffffff'>";

Txt+="<TR bgcolor='#ffffcc'><TD align='center' width=30>日</TD>";

Txt+="<TD align='center'>曜日</TD><TD align='center' width=500> スケジュール</TD></TR>";

Su=Nissu(annus, Tuki);

Y=annus%(Math.floor(annus/100));

M=Tuki;

if(M==1)

{

M=13;

Y-=1;

}

else if(M==2)

{

M=14;

Y-=1;

}

First=(Math.floor(A/4)-2*A+Y+Math.floor(Y/4)+Math.floor((26*(eval(M)+1)/10)))%7;

if(First<0) First+=7;

for(i=0; i < Su; i++)

{

j=(First+i)%7;

if(j==0) color="<FONT color='red'>";

else color="<FONT color='black'>";

if((i+1==DD) && (Tuki==MM) && (annus==YY)) today="bgcolor='aqua'";

else today="";

kyo = Date.parse(annus+"/"+Tuki+"/"+(i+1));

for(k=0; k < holiday.length; k++)

{

it=Date.parse(holiday[k]);

if(kyo==it)

{

memo="<FONT color='red'>"+saijitsu[k]+"</FONT>";

color="<FONT color='red'>";

break;

}

else memo="&nbsp;";

}

for(l=0; l < schedule.length; l++)

{

hd=Date.parse(schedule[l]);

if(kyo==hd)

{

memo2=" "+yotei[l];

break;

}

else memo2="&nbsp;";

}

Txt+="<TR><TD width=30 align='center'"+today+">"+color+(i+1)+"</FONT></TD><TD align='center'"+today+">"+color+Yoobi[j]+"</FONT></TD><TD width=500>"+memo+memo2+"</TD></TR>"; }

Txt+="</TABLE></DIV>";

}

function newWin(EM,annus) { //指定月のウィンドウとカレンダーを用意する関数

Txt="<HTML><HEAD><TITLE>"+annus+"年"+EM+"月</TITLE>";

Txt+="</HEAD><BODY bgcolor='#90ee90'>";

Win=window.open("","");

Calender(EM,annus);

with(Win.document)

{

open("text/html");

write(Txt,"</BODY></HTML>");

close();

}

}

//-->

</SCRIPT>

上のソースの内で設定する必要があるのは、太字で書かれたスケジュールと祝祭日の配列です。 設定は、例えばスケジュールなら schedule[4]="2005/2/3"; yotei[4]="節分"; のように、schedule の配列に年月日を半角数字でスラッシュで区切って入れ、 yotei の配列に対応する内容を書き込みます。祝祭日なら holiday と saijitsu の配列で対応させます。

上のスケジュールはサンプルなので世間の記念日や暦日を適当に入れていますが、実際はこのとおりにする必要はありません。 好きなスケジュールを入れてください。また数に制限は無く、何十個設定してもかまいません。 また何年先まで設定してもかまわないのです。祝祭日は上のまま使ってもかまいませんが、来年やそれ以降の祝祭日の日付がわかるなら、 それをあらかじめ加えておくことが出来ます。

祝祭日の配列は、要するにカレンダー上で赤字で表示するための配列なので、国民の祝日に加えて（あるいはそれに代えて）、 ご自分のスケジュール上の休日を設定することも出来ます。

HTML ファイルの <BODY>〜</BODY> 内には以下のスクリプトを入れるだけでＯＫです。

<SCRIPT Language="JavaScript">

<!--

Calender(MM,YY);

with(document)

{

write("<DIV align='center'><FORM><STRONG>",YY,"年</STRONG><BR>");

for(i=0;i<12;i++)

{

mensis=i+1;

write("<INPUT type='button' name='",mensis,"' value='",mensis,"月' onClick='newWin(this.name,YY)'> ");

}

write("</FORM>");

write(Txt);

write("<BR><FORM><STRONG>",YY+1,"年</STRONG><BR>");

for(i=0;i<12;i++)

{

menses=i+1;

write("<INPUT type='button' name='",menses,"' value='",menses,"月' onClick='newWin(this.name,YY+1)'> ");

}

write("</FORM></DIV>");

}

//-->

</SCRIPT>

Q1: スケジュールの文字列にリンクを貼りたいのですが。

次のように書きます。リンク先ＵＲＬは " " ではなく ' ' で囲んで下さい。

yotei[0]="<A HREF='***.htm'>初詣</A>";

target を指定する場合も target='_blank' のように入れます。

Q2: スケジュールの途中に書き加えたいとき、それ以降をすべて書き加えなければなりませんか？

その必要はありません。例えば上の例で2001年 5月12日に「グアム旅行」、2001年 11月 1日に「誕生日」を入れたい場合、順番通りに挿入する必要はなく、 スケジュールの最後に

schedule[18]="2002/5/12";
yotei[18]="グアム旅行";

schedule[19]="2002/11/1";
yotei[19]="誕生日";

と加えていけばＯＫです。

Q3: 新しいウィンドウを開かず、同じページ内でカレンダーを切り替えたいのですが。

まず Calender(Tuki,annus) 関数の２行目にある <DIV align='center'> と同最終行の </DIV> を削除します。

    function Calender(Tuki,annus) { //カレンダーを作成する関数
      First=0; 
      Txt+="<FONT size=5>"+annus+"年"+Tuki+"月</FONT>";
                     ・
                     ・
                     ・
      Txt+="</TABLE>";
    }
    

また newWin(EM,annus) 関数を次のように定義し直します。

    function newWin(EM,annus) { //指定月のウィンドウとカレンダーを用意する関数
      Txt = '';
      Calender(EM,annus); 
      document.getElementById("Calendarium").innerHTML = Txt;
    }
    

次に HTML ファイルの <BODY>〜</BODY> 内に入れるスクリプトを以下のように書き替えます。

    with(document) 
    {
      write("<DIV align='center'><FORM><STRONG>",YY,"年</STRONG><BR>"); 
      for(i=0;i<12;i++) 
      {
        mensis=i+1; 
        write("<INPUT type='button' name='",mensis,"' value='",mensis,"月' onClick='newWin(this.name,YY)'> ");
      } 
      write("</FORM>"); 
      write("<P id='Calendarium' style='position:relative;'></P>");
      newWin(MM,YY);
      write("<BR><FORM><STRONG>",YY+1,"年</STRONG><BR>"); 
      for(i=0;i<12;i++) 
      {
        menses=i+1; 
        write("<INPUT type='button' name='",menses,"' value='",menses,"月' onClick='newWin(this.name,YY+1)'> ");
      } 
      write("</FORM></DIV>");
    }
    

この方法は、IE 5.x 以上、Netscape 7.x 以上、Opera 7.x 以上で有効です。getElementById や innerHTML を認識しないスクリプトエンジンでは動作しません。

Q4: 思ったとおりに表示されません。

以下の点に注意して、ソースを再チェックしてください。

1. "2005/1/1" などの日付を正確に入れているか。
2. schedule[0]="2005/1/1"; yotei[0]="初詣";、schedule[1]="2005/1/5"; yotei[1]="御用始め"; のようにきちんと連番になっているか。 また、schedule と yotei、holiday と saijitsu の配列数は一致しているか。
3. 同じ配列数が重複していないかどうか。

Q5: 年が変わったらどうなりますか？

このプログラムは、"2005/1/1" などの日付配列から今年に一致するものを今年度分として表示しますので、年が変われば来年分が今年の分に変わります。

---

次のトピックは「デスクトップにスクロールバー」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで