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でした。現在は表示していません)