楽天のカレンダーが表示されなくなってたので自分で組みました。
1ヶ月毎に自動で切り替わる仕様です。
CSS
table.calbase_rakuten { background-color: #FFFFFF; border: 1px solid #CECECE; width: 100%; border-collapse: collapse; padding: 0px 0px 10px 0px; } table.calbase_rakuten * { font-size: 98%; color: #000000; border-collapse: collapse; padding: 0px; margin: 0px; } table.calbase_rakuten th { text-align: center; } th.caltitle_rakuten { font-size: 85%; padding: 10px 0px 0px 0px; } table.calframe_rakuten { border-collapse: collapse; margin: 10px 10px 0px 10px; table-layout: fixed; width: 178px; } table.calframe_rakuten th { text-align: center; padding: 0px 0px 3px 0px; } table.calframe_rakuten td { border: 1px solid #FFFFFF; background-color: #FFFFFF; width: 19px; height: 17px; text-align: center; } tr.weektitle_rakuten td { background-color: #EEEEEE; } td.event1day_rakuten { background-color: #FFC6C6 !important; } font.event1day_rakuten { color: #FFC6C6; } td.event2day_rakuten { background-color: #B5DAFF !important; } font.event2day_rakuten { color: #B5DAFF; } td.event3day_rakuten { background-color: #FEDE93 !important; } font.event3day_rakuten { color: #FEDE93; } table.event_rakuten { text-align: left; word-break: break-all; margin: 7px 10px 7px 10px; border-collapse: collapse; line-height: 120%; table-layout: fixed; width: 141px; } table.event_rakuten td { padding: 0px 0px 0px 0px; } table.text_rakuten { text-align: left; word-break: break-all; margin: 0px 10px 10px 10px; border-collapse: collapse; line-height: 120%; table-layout: fixed; width: 178px; }
HTML
<table class="calbase_rakuten"> <tr> <td align="center"> <table> <tr> <td align="center"> <table class="calframe_rakuten" id="forArea0"> <tr> <th colspan="7"><span id="y0"></span>年<span id="m0"></span>月</th> </tr> <tr class="weektitle_rakuten"> <td style="color:#BF0000">日</td> <td style="color:#000000">月</td> <td style="color:#000000">火</td> <td style="color:#000000">水</td> <td style="color:#000000">木</td> <td style="color:#000000">金</td> <td style="color:#1D54A7">土</td> </tr> </table> <table class="calframe_rakuten" id="forArea1"> <tr> <th colspan="7"><span id="y1"></span>年<span id="m1"></span>月</th> </tr> <tr class="weektitle_rakuten"> <td style="color:#BF0000">日</td> <td style="color:#000000">月</td> <td style="color:#000000">火</td> <td style="color:#000000">水</td> <td style="color:#000000">木</td> <td style="color:#000000">金</td> <td style="color:#1D54A7">土</td> </tr> </table> </td> </tr> <tr> <td colspan="2"> <table class="event_rakuten"> <tr><td><font class="event1day_rakuten">■</font> 休業日</td></tr> <tr><td><font class="event2day_rakuten">■</font> 受注・お問い合わせ業務のみ</td></tr> <tr><td><font class="event3day_rakuten">■</font> 発送業務のみ</td></tr> </table> </td> </tr> <tr> <td colspan="2"> <table class="text_rakuten"> <tr><td> ※ご注文は24時間年中無休で受け付けております。 </td></tr> </table> </td> </tr> </table> </td> </tr> </table>
Javascript
$(document).ready(function(){ var dt = new Date(); var echoCount = 2; var holidayDates = ['2019/3/21','2019/4/29','2019/4/30','2019/5/1','2019/5/2','2019/5/3','2019/5/4','2019/5/5','2019/5/6','2019/7/15','2019/8/11','2019/8/12','2019/9/16','2019/9/23','2019/10/14','2019/10/22','2019/11/3','2019/11/4','2019/11/23']; for (var i = 0; i < echoCount; i++) { $('#y' + i).append(dt.getFullYear()); $('#m' + i).append(dt.getMonth() + 1); createClendar(dt, '#forArea' + i, 'row' + i); var nextLastDay = new Date(dt.getFullYear(), dt.getMonth()+2, 0).getDate(); if (nextLastDay <= dt.getDate()) { dt.setDate(dt.getDate() + 1); } else { dt.setMonth(dt.getMonth() + 1); } } function createClendar(dt, areaName, rowName) { var lastDay = new Date(dt.getFullYear(), dt.getMonth()+1, 0).getDate(); var row = 0; var k = 0; var a = dt.getDay(); var beginMonth = new Date(dt.getFullYear(), dt.getMonth(), 1).getDay(); if (beginMonth != 0) { var lateLastMonth = new Date(dt.getFullYear(), dt.getMonth(), 0).getDate(); var beginMonth = new Date(dt.getFullYear(), dt.getMonth(), 1).getDay(); var i = lateLastMonth - beginMonth + 1; var j = 0; $(areaName).append('<tr id="' + rowName + row + '"></tr>'); for (i; i <= lateLastMonth; i++) { $('#' + rowName + row).append('<td style="color:#CECECE">' + i + '</td>'); j++; } for (j; j < 7; j++) { k++; if (j == 0 || j == 6) { $('#' + rowName + row).append('<td style="color:#1D54A7" class="event1day_rakuten">' + k + '</td>'); } else if (holidayDates.some(function(e) {return e == dt.getFullYear() + '/' + (dt.getMonth()+1) + '/' + k})) { $('#' + rowName + row).append('<td style="color:#BF0000" class="event1day_rakuten">' + k + '</td>'); } else { $('#' + rowName + row).append('<td style="color:#000000">' + k + '</td>'); } } } for (var i = 0; i < 7; i++) { k++; if (i == 0) { row++; $(areaName).append('<tr id="' + rowName + row + '"></tr>'); } if (i == 0 || i == 6) { $('#' + rowName + row).append('<td style="color:#1D54A7" class="event1day_rakuten">' + k + '</td>'); } else if (holidayDates.some(function(e) {return e == dt.getFullYear() + '/' + (dt.getMonth()+1) + '/' + k})) { $('#' + rowName + row).append('<td style="color:#BF0000" class="event1day_rakuten">' + k + '</td>'); } else { $('#' + rowName + row).append('<td style="color:#000000">' + k + '</td>'); } if (i == 6) { i = -1; } if (k >= lastDay) { var forCount = 7 - new Date(dt.getFullYear(), dt.getMonth(), k).getDay(); for (j = 1; j < forCount; j++) { $('#' + rowName + row).append('<td style="color:#CECECE">' + j + '</td>'); } break; } } } });
まとめ
祝日判定をarray.someでしているがIE11で動かなかった。
if (holidayDates.some(e) => e == '2019/4/29') { // ie11で動かないよ // でもChromeとFirefoxでは動くよ } if (holidayDates.some(function(e) {return e == '2019/4/29'})) { // ie11でも動くよ }