JSカレンダーについて
baserCMSのカレンダーは、投稿用専用カレンダーです。PHPカレンダーはプラグインには見当たりません
仕方なくJSカレンダーを実装してみました。・・・当サイトのサイドバーにも表示してみました！
改良が必要な点も多々ありますが、今の所、これで運用しています。（当サイトのカレンダーではありません。今の所内部向けサイトです）
<style>
table.calen { border-collapse:collapse; font-size:1.2em; }
table.calen th { border:1px solid #ccc; height:33px;text-align:center; }
table.calen td { border:1px solid #ccc; text-align:center; height:25px; width:45px; }
table.calen .sat { color:blue; }
table.calen .sun { color:red; }
table.calen .today { background-color:#FF9; font-weight:600; }
/* table.calen tr.bg1 { background-color:#f5f5dc; }
table.calen tr.bg2 { background-color:#eeeeee; } */
</style>
<script>
window.onload = function() {
showCalen(0);
}
</script>
<div style=”margin-left:8px;margin-bottom:10px;”>
<div id=”calen”></div>
<div align=”center” style=”margin-top:12px;”>
<p><input type=”button” value=”前月” onclick=”showCalen(-1)”>
<input type=”button” value=”今月” onclick=”showCalen(0)”>
<input type=”button” value=”次月” onclick=”showCalen(1)”></p></div>
</div>
<script type=”text/javascript”>
var monthdays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var days = new Array(“日”, “月”, “火”, “水”, “木”, “金”, “土”);
// 祝日1：何月の何日か？
var Holidays1 = new Array(1,1, 2,11, 3,21, 4,29, 5,3, 5,4, 5,5, 8,11, 9,23, 11,3, 11,23, 12,23);
// 祝日2：何月の第何月曜日か？
var Holidays2 = new Array(1,2, 7,3, 9,3, 10,2);
// 現在の年、月、日の取得
var now = new Date();
var thisYear = now.getFullYear();
var thisMonth = now.getMonth() + 1;
var today = now.getDate();
// 表示年月の記憶
var year = thisYear;
var month = thisMonth;
function showCalen(n) {
if (n==0) {
year = thisYear;
month = thisMonth;
}
else {
month += n;
}
if (month == 0) { year–; month=12; }
else if (month == 13) { year++; month = 1; }
var flag = (year == thisYear && month == thisMonth) ? 1: 0;
var date = new Date(year, month-1, 1); // 表示月の 1日の Date()
var startDay = date.getDay();
var dateMax = monthdays[month – 1];
if (month == 2 && ((year%4 == 0 && year%100 != 0) || year%400 == 0)) dateMax = 29;
// 休日配列の初期化
var holidays = new Array();
for (var i = 0; i <= dateMax; i++) holidays[i] = 0;
// 祝日1 の処理
var firstSunday = (startDay == 0) ? 1: 8 – startDay;
for (i = 0; i < Holidays1.length; i += 2) {
if (Holidays1[i] == month) {
holidays[Holidays1[i+1]] = 1;
for (var j = firstSunday; j < dateMax; j += 7)
if (Holidays1[i+1] == j ) { holidays[j+1] = 1; break; } // 振替休日
}
}
// 祝日2 の処理
var mondays = new Array();
var firstMonday = (startDay < 2) ? 2 – startDay: 9 – startDay;
for (i = 0; i < Holidays2.length; i += 2)
if (Holidays2[i] == month) holidays[(Holidays2[i+1] – 1) * 7 + firstMonday] = 1;
var htmlStr = “<table class=’calen’>\n” + “<tr class=’bg1′><th colspan=7>”
+ year + “年 ” + month + “月</th></tr>\n”;
htmlStr += “<tr class=’bg2′><th class=’sun’>” + days[0] + “</th>”;
for (i = 1; i < 6; i++) htmlStr += “<th>” + days[i] + “</th>”;
htmlStr += “<th class=’sat’>” + days[6] + “</th></tr>\n”;
var col = 0;
if (startDay > 0) {
htmlStr += “<tr>”;
for ( ; col < startDay; col++) htmlStr += “<td> </td>”;
}
for (i = 1; i <= dateMax; i++) {
if (col == 0) htmlStr += “<tr>”;
if (flag == 1 && i == today) {
if (holidays[i] == 1 || col == 0) htmlStr += “<td class=’today sun’>”;
else if (col == 6) htmlStr += “<td class=’today sat’>”;
else htmlStr += “<td class=’today’>”;
}
else if (holidays[i] == 1 || col == 0) htmlStr += “<td class=’sun’>”;
else if (col == 6) htmlStr += “<td class=’sat’>”;
else htmlStr += “<td>”;
htmlStr += i + “</td>”;
if (col == 6) { htmlStr += “</tr>\n”; col=0; } else col++;
}
if (col != 0) {
for ( ; col < 7; col++) htmlStr += “<td> </td>”;
htmlStr += “</tr>”;
}
htmlStr += “</table>”;
document.getElementById(“calen”).innerHTML = htmlStr;
}
</script>
なお、このJSカレンダーはWordPressでは表示出来ません。画像として掲載しました。
（一度、PC端末では正常に動作しましたが、モバイル端末ではNGでした。現在は表示していません）
