// 【以下のJavaScriptをカレンダーを表示したい部分に貼り付けます】
<script type="text/JavaScript">
// -------------------------- 各月カレンダー表示 ------------------------------
WeekTd = new Array("日","月","火","水","木","金","土"); // 表示曜日セット
mmdd = new Array(31,28,31,30,31,30,31,31,30,31,30,31); // 毎月の日数セット
dd = new Date(); // 今日を読込む
mm = new Date().getMonth();
yy = new Date().getFullYear();
tdfont =" style=' padding:2px 0px 0px 2px; border:1px #6da solid; width:13px;background:#fff;'"; // セル内文字サイズ設定/位置調整
tdwstyle=" padding:2px 0px 0px 2px; border:1px #6da solid; width:13px;background:#fff; color:#000; ";
tdwstyle1=" style=' padding:2px 0px 0px 2px; border:1px #6da solid; width:13px;background:#fff;color:#d00;'"; // 日曜日の文字色設定
tdwstyle2=" style=' padding:2px 0px 0px 2px; border:1px #6da solid; width:13px;background:#fff;'"; // 月〜金曜日の背景色設定
tdwstyle3=" style=' padding:2px 0px 0px 2px; border:1px #6da solid; width:13px;color:#00d;'"; // 土曜日の文字色設定
document.writeln("<div style='width:133px; margin:0 auto; text-align:center;'><section style='display:flex; justify-content:space-between; background:#9d9; font-size:14px; padding-top:2px; text-align:center; font-weight:bold;'><span style='cursor:cell;' onclick='ForeY()' title='前年を表示'>≪</span><span style='cursor:pointer;' onclick='ForeM()' title='前月を表示'>＜</span><span ID='midasi' style='padding:2px 5px; background:#ce9; font-size:13px;'>2020/08</span><span style='cursor:pointer;' onclick='NextM()' title='次月を表示'>＞</span><span style='cursor:cell;' onclick='NextY()' title='次年を表示'>≫</span></section><div id='matrix2' style='font-size:8pt;'></div></div>");
dbox();
// -------------------------日にちの表示-------------------------
function dbox(){ // 日にち月表の表示
if ((!(yy%4) && yy%100) || !(yy%400)){mmdd[1] = 29;}else{mmdd[1] =28;} // 閏年処理
dd.setDate(1);
fWeek = dd.getDay()-1; // 初日の曜日の取得-1
setday=0; // 表示日値の初期値セット
Mm=(mm<9)?"0"+(mm+1):mm+1; // 月表示２桁化
MM=mm+1; // 実際の表示月
if( document.all ){ document.all("midasi").innerText =yy+"/"+Mm; // IE4等対応
}else{ document.getElementById("midasi").innerHTML =yy+"/"+Mm;} // 一般の場合の対応
// カレンダー日にち月枠の表示
txtLN = " <table style='width:133px; border:1px #999 solid; border-collapse:collapse; text-align:center; font-weight:normal; font-size:12px;'><tr>";
// 曜日行の表示
txtLN += " <td "+ tdwstyle1 +">"+WeekTd[0]+"</td>"; // 日曜日背景
for(i=1;i<6;i++){
txtLN += " <td "+ tdwstyle2 +">"+WeekTd[i]+"</td>"; // 月〜金曜日
}
txtLN += " <td "+ tdwstyle3 +">"+WeekTd[6]+"</td></tr><tr>"; // 土曜日背景
m_day = mmdd[ mm ]; // 各月の日数
w_day = new Date(yy, mm, 1 ).getDay(); // 1日の曜日を取得
for(i=1;i<= w_day;i++){ // 1日の曜日の数だけ空白を表示
txtLN += " <td "+ tdfont +" > </td>";
}
// -------------------------日付月表の表示 -------------------------
for(i=1;i<= m_day;i++){ // 1日から月末日までの表示
w_day = new Date(yy, mm, i ).getDay();
s_day = HolidCK(yy+"/"+MM+"/"+ i); // 祝日の確認
if( i==new Date().getDate() && yy==new Date().getFullYear() && mm==new Date().getMonth()){
tdwstyle = ( !s_day )?'padding:2px 0px 0px 2px; border:1px #6da solid; width:13px; color:#222;background:#afa;' : 'padding:2px 0px 0px 2px; border:1px #6da solid; width:13px; color:#222;background:#afa; color:#d00;'; // 本日の背景色(・色)
tdwtitle = ( !s_day )?" title = '本日'":" title = '" + s_day + "'"; // 本日のtitle表示設定
} else if( s_day ){
tdwstyle += ' background:#fcf; color:#d00;'; // 祝日の背景色,色
tdwtitle =" title = '" + s_day + "'"; // 祝日のtitle表示設定
} else { tdwstyle = "padding:2px 0px 0px 2px; border:1px #6da solid; width:13px;background:#fff; color:#000;"; tdwtitle =""; }
if( w_day == 6 ){ // 土曜日の処理
tdwstyle += 'color:#00d;'
txtLN += " <td" + tdwtitle +" style ='"+ tdwstyle + "'>" + i + "</td>";
txtLN += "</tr><tr>";
} else if( w_day == 0 ){ // 日曜日の処理
tdwstyle += 'color:#d00;'
txtLN += " <td" + tdwtitle +" style ='"+ tdwstyle + "'>" + i + "</td>";
} else { // 平日の処理
tdwstyle += ''
txtLN += " <td" + tdwtitle +" style ='"+ tdwstyle + "'>" + i + "</td>";
}
}
w_day = new Date(yy, mm+1, 0 ).getDay(); // 最後の週の土曜日まで移動
for(i=1;i< 7 - w_day;i++){
txtLN += " <td "+ tdfont +" > </td>";
}
txtLN += " </tr></table>";
document.getElementById("midasi").innerHTML =yy+"/"+Mm; // 年月の表示
document.getElementById("matrix2").innerHTML =txtLN; // 当月表の表示
}; // dbox() -----------------
// 表示月の変更 ================================================
function NextY(){ // 次の年を表示
yy++;
dd.setFullYear(yy);
dbox();
}; // -----------------
function NextM(){ // 次の月を表示
if(mm==11){yy++;mm=0;}else{mm++;} // 年越し処置
dd.setFullYear(yy); dd.setMonth(mm);
document.getElementById("midasi").innerHTML =yy+"/"+Mm;
dbox();
}; // -----------------
function ForeM(){ // 前月を表示
if(mm==0){yy--;mm=11;}else{mm--;} // 越年処置
dd.setFullYear(yy); dd.setMonth(mm);
dbox();
}; // -----------------
function ForeY(){ // 前年を表示
yy--;
dd.setFullYear(yy);
dbox();
}; // -----------------
// ------------------------- 祝日のチェック --------------------------
function HolidCK(ckDay) { // ckDay = yyyy/mm/dd
Dsprit = ckDay.split("/");
ya = Dsprit[0]-0; ma = Dsprit[1]-0; da = Dsprit[2]-0; // 文字→数字 変換
switch (ma) { // 1-12月毎に切替て条件設定します
case 1:
if (da==1){ ds = "元日";
} else if ( da==1+1 && new Date(ya,1-1,1).getDay()==0) { ds = "振替休日";
} else if ( ya>= 2000 && da == 14-new Date(ya,1-1,-1).getDay() ){ ds = "成人の日";
} else if ( ya< 2000 && da == 15 ){ ds = "成人の日";
} else { ds = "" }
break;
case 2:
if (da==11){ ds = "建国記念の日";
} else if ( da == 11+1 && new Date(ya,2-1,11).getDay() == 0 ){ ds = "振替休日";
} else if ( ya>= 2020 && da == 23 ){ ds = "天皇誕生日";
} else if ( ya>= 2020 && da == 23+1 && new Date(ya,2-1,23).getDay()==0 && ya>= 2020 ){ ds= "振替休日";
} else { ds = "" }
break;
case 3:
d3 = Math.floor(20.8431+0.242194*(ya-1980)-Math.floor((ya-1980)/4)); // 春分の日の計算
if ( da == d3 ){ ds = "春分の日";
} else if ( da == d3+1 && new Date(ya,3-1,d3).getDay() == 0 ){ ds = "振替休日";
} else { ds = "" }
break;
case 4:
if ( ya== 2019 ){ if ( da== 29 ){ ds = "昭和の日"
} else if ( da== 30 ){ds = "休日" } else { ds = "" }
} else if ( da == 29 ){ if ( ya >= 2007 ) {ds = "昭和の日" } else {ds = "みどりの日" }
} else if ( da == 29+1 && new Date(ya,4-1,29).getDay() == 0 && ya >= 2007 ){ ds = "振替休日";
} else { ds = "" }
break;
case 5:
if( ya== 2019 && da== 1 ){ ds= "天皇の即位の日"
} else if( ya== 2019 && da == 2 ){ ds= "休日"
} else if ( da == 3 ){ ds = "憲法記念日" ;
} else if ( da == 4 ) { if ( ya >= 2007 ) {ds = "みどりの日" } else {ds = "国民の休日" };
} else if ( da == 5 ){ ds = "こどもの日";
} else if ( da == 5+1 && new Date(ya,5-1,5).getDay() <= 2 && ya >= 2007 ) {ds = "振替休日" ;
} else { ds = "" }
break;
case 6:
ds = "";
break;
case 7:
if( ya== 2020 ) { if( da== 23 ){ ds= "海の日";
} else if( da== 24 ){ ds= "スポーツの日"; } else { ds = "" }
} else if( ya== 2021 ) { if( da== 22 ){ ds= "海の日";
} else if( da== 23 ){ ds= "スポーツの日"; } else { ds = "" }
} else if ( ya>= 2003 && da == 21-new Date(ya,7-1,-1).getDay() ){ ds = "海の日" ;
} else { ds = "" }
break;
case 8:
if ( ya== 2020 ) { if ( da == 10 ){ ds = "山の日"; } else { ds = "" }
} else if ( ya== 2021 ) { if ( da == 8 ){ ds = "山の日"; } else if ( da == 9 ){ ds = "振替休日"; } else { ds = "" }
} else if ( da == 10+1 ){ if ( ya >= 2016 ) {ds = "山の日" }
} else if ( da == 11+1 && new Date(ya,8-1,11).getDay() == 0 && ya >= 2016 ){ ds = "振替休日";
} else { ds = "" }
break;
case 9: // 注 第３月曜日/敬老の日(15〜21) 秋分の日(22〜24)
d99= 21-new Date(ya,9-1,-1).getDay(); // 第３月曜日
d9 = Math.floor(23.2488+0.242194*(ya-1980)-Math.floor((ya-1980)/4)); // 秋分の日の計算
if ( ya>= 2003 && da == d99){ ds = "敬老の日" ;
} else if ( ya< 2003 && da == 15 ){ ds = "敬老の日" ;
} else if ( da == d9 ){ ds = "秋分の日" ;
} else if ( da == d9+1 && new Date(ya,9-1,d9).getDay() == 0 && ya>= 2003 ){ ds = "振替休日";
} else if ( da == d99+1 && d9 == d99+2 ){ ds = "休日"; // 敬老の日と秋分の日に挟まれた日
} else { ds = "" }
break;
case 10:
if ( ya== 2019 && da==22 ) { ds= "休日 即位礼正殿の儀";
} else if ( ya== 2021 && da==11 ) { ds= "";
} else if ( ya> 2020 && da== 14-new Date(ya,10-1,-1).getDay() ){ ds= "スポーツの日"; // 第２月曜日
} else if( ya< 2020 && ya>= 2000 && da== 14-new Date(ya,10-1,-1).getDay() ){ ds= "体育の日";// 第２月曜日
} else if( da == 10 && ya<2000 ){ ds = "体育の日" ;
} else { ds = "" }
break;
case 11:
if ( da == 3 ){ ds = "文化の日" ;
} else if ( da == 3+1 && new Date(ya,11-1,3).getDay() == 0 ){ ds = "振替休日";
} else if ( da == 23 ){ ds = "勤労感謝の日" ;
} else if ( da == 23+1 && new Date(ya,11-1,23).getDay() == 0 ){ ds = "振替休日";
} else { ds = "" }
break;
case 12:
if ( ya< 2019 && ya>= 1989 && da == 23){ ds = "天皇誕生日" ;
} else if ( ya< 2019 && ya>= 1989 && da == 23+1 && new Date(ya,12-1,23).getDay() == 0 ){ ds = "振替休日";
} else { ds = "" }
break;
}
return ds ;
}; // HolidCK(ckDay) --------------------------
</script>