【JavaScript】アクセスしてから前後三ヶ月のカレンダーを表示する

2026年09月07日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は使い所が謎なtipsを紹介します。
アプリ開発なんかに使えますかね？

実装例

HTML例

<div id="wrap">
  <div id="calendar"></div>
</div>

CSS例

#wrap {
width: 280px;
margin: 0 auto;
}
#calendar {
height: 420px;
overflow-y: scroll;
border: 1px solid #ccc;
position: relative;
}
.month-section table {
width: 100%;
border-collapse: collapse;
}
.month-header th {
background-color: #333;
color: #fff;
font-size: 1.05em;
font-weight: bold;
padding: 8px 0;
text-align: center;
}
.day-header th {
text-align: center;
padding: 4px 0;
font-size: 0.8em;
border: 1px solid #ccc;
background-color: #f5f5f5;
color: #333;
}
.day-header th.sun {
color: #d00;
}
.day-header th.sat {
color: #00d;
}
.month-section table tbody td {
border: 1px solid #ccc;
width: calc(100% / 7);
height: 55px;
vertical-align: top;
padding: 3px 4px;
font-size: 0.82em;
color: #333;
}
.month-section table tbody td.sun {
color: #d00;
}
.month-section table tbody td.sat {
color: #00d;
}
.month-section table tbody td.other-month {
color: #bbb;
}

JavaScript例

var data = [];
function getCalendar(y_start, m_start, y_end, m_end) {
var calendar = document.getElementById('calendar');
var cur_y = y_start;
var cur_m = m_start;
while(cur_y < y_end || (cur_y === y_end ? cur_m <= m_end : false)){
var table = document.createElement('table');
var thead = document.createElement('thead');
table.appendChild(thead);
var headerRow = document.createElement('tr');
headerRow.className = 'month-header';
var headerTh = document.createElement('th');
headerTh.setAttribute('colspan', 7);
headerTh.textContent = cur_y + '年' + (cur_m + 1) + '月';
headerRow.appendChild(headerTh);
thead.appendChild(headerRow);
var dayRow = document.createElement('tr');
dayRow.className = 'day-header';
['日', '月', '火', '水', '木', '金', '土'].forEach(function (d, i) {
var th = document.createElement('th');
th.textContent = d;
if (i === 0) th.classList.add('sun');
if (i === 6) th.classList.add('sat');
dayRow.appendChild(th);
});
thead.appendChild(dayRow);
var tbody = document.createElement('tbody');
table.appendChild(tbody);
var first = new Date(cur_y, cur_m, 1);
var cur = new Date(cur_y, cur_m, 1 - first.getDay());
var lastDate = new Date(cur_y, cur_m + 1, 0).getDate();
var last = new Date(cur_y, cur_m, lastDate);
var endDate = new Date(cur_y, cur_m, lastDate + (6 - last.getDay()));
var tr;
while (cur <= endDate) { if (cur.getDay() === 0) { tr = document.createElement('tr'); tbody.appendChild(tr); } var td = document.createElement('td'); td.textContent = cur.getDate(); if (cur.getMonth() !== cur_m) { td.classList.add('other-month'); } else { if (cur.getDay() === 0) td.classList.add('sun'); if (cur.getDay() === 6) td.classList.add('sat'); } tr.appendChild(td); cur.setDate(cur.getDate() + 1); } var section = document.createElement('div'); section.className = 'month-section'; section.dataset.y = cur_y; section.dataset.m = cur_m; section.appendChild(table); calendar.appendChild(section); cur_m++; if (cur_m > 11) { cur_m = 0; cur_y++; }
}
document.querySelectorAll('#calendar .month-section').forEach(function (el) {
data.push({
position: el.offsetTop,
y: parseInt(el.dataset.y),
m: parseInt(el.dataset.m)
});
});
}
(function () {
function init() {
var now = new Date();
var y = now.getFullYear();
var m = now.getMonth();
var startDate = new Date(y, m - 3, 1);
var endDate = new Date(y, m + 3, 1);
getCalendar(startDate.getFullYear(), startDate.getMonth(), endDate.getFullYear(), endDate.getMonth());
var calendar = document.getElementById('calendar');
for (var i = 0; i < data.length; i++) {
if (data[i].y === y) {
if (data[i].m === m) {
calendar.scrollTop = data[i].position;
break;
}
}
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();