1年分のカレンダーを表示してみました。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Yearly Calendar</title>
<style>
.calendar-container {
margin-bottom: 20px;
overflow-x: auto; /* 横スクロール可能にする */
}
.calendar-container table {
border-collapse: collapse;
/* インラインブロック要素として表示 */
display: inline-block;
margin-right: 20px;
vertical-align: top; /* 上揃えにする */
}
.calendar-container th, .calendar-container td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
/* 日曜日の文字色を赤に設定 */
.calendar-container th:first-child,
.calendar-container td:first-child {color: red;
}
</style>
</head>
<body>
<div id="calendarContainer"></div>
<script>
function createYearlyCalendarWithMonthNames(year) {
// カレンダーのコンテナ要素を取得
var container =
document.getElementById("calendarContainer");
// 12ヶ月分のカレンダーを横並びに作成
// カレンダーコンテナを作成
var calendarContainer = document.createElement("div");
calendarContainer.className = "calendar-container";
// 12ヶ月分のカレンダーを作成
for (var month = 0; month < 12; month++) {
// 新しいテーブル要素を作成
var table = document.createElement("table");
// テーブルキャプション（月名）を作成
var caption = document.createElement("caption");
caption.textContent = getMonthName(month) +
" " + year; table.appendChild(caption);
// テーブルヘッダーを作成
var thead = document.createElement("thead");
var tr = document.createElement("tr");
var daysOfWeek = ["日", "月", "火", "水", "木", "金", "土"];
daysOfWeek.forEach(function(day) {
var th = document.createElement("th");
th.textContent = day;
tr.appendChild(th);
});
thead.appendChild(tr);
table.appendChild(thead);
// テーブルボディを作成
var tbody = document.createElement("tbody");
var date = new Date(year, month, 1);
// 月の最初の曜日を取得
var firstDayOfWeek = date.getDay();
// 月の日数を取得
var daysInMonth = new Date(year, month + 1, 0).getDate();
var currentDay = 1;
var tr;
// カレンダーの週を揃えるための行を追加
tr = document.createElement("tr");
for (var i = 0; i < firstDayOfWeek; i++) {
var td = document.createElement("td");
tr.appendChild(td);
}
while (currentDay <= daysInMonth) {
var td = document.createElement("td");
td.textContent = currentDay;
currentDay++;
tr.appendChild(td);
if (tr.children.length === 7) {
tbody.appendChild(tr);
tr = document.createElement("tr");
}
}
if (tr.children.length > 0) {
while (tr.children.length < 7) {
var td = document.createElement("td");
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
// カレンダーをカレンダーコンテナに追加
calendarContainer.appendChild(table);
}
// カレンダーコンテナをメインコンテナに追加
container.appendChild(calendarContainer);
}
// 月の名前を取得する関数
function getMonthName(month) {
var months = ["1月 January", "2月 February",
"3月 March", "4月 April", "5月 May", "6月 June",
"7月 July", "8月 August", "9月 September",
"10月 October", "11月 November", "12月 November"];
return months[month];
}
// 2024年の12ヶ月分のカレンダーを作成
createYearlyCalendarWithMonthNames(2024);
</script>
</body>
</html>
<!-- index.html -->
// 2024年の12ヶ月分のカレンダーを作成
createYearlyCalendarWithMonthNames(2024);
表示結果A
表示結果B
表示結果C
表示結果はブラウザーのサイズに依存します。
