カレンダー関連は過去にも色々作っていますが、今はコレが一番のお気に入りです。
Let's start JavaScript 24 1年分のカレンダーを表示 2024/03/10
Visual Studio Basic_15 カレンダー表示と閏年設定 2020/09/05
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>カレンダー</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
background-color: turquoise;
}
.mainbox {
height: 400px;
width: 400px;
}
table {
width: 100%;
border-collapse: collapse;
background-color: white;
border: 3px solid turquoise;
}
th, td {
border: 3px solid turquoise;
text-align: center;
padding: 10px;
}
h2 {
text-align: center;
color: cadetblue;
}
.right-side{
text-align: right;
}
.linecolor{
border: 3px solid turquoise;
}
</style>
</head>
<body>
<div class="mainbox">
<h2>万年カレンダー</h2>
<form>
<div class="right-side">
<input type="number" id="year" class="linecolor"
name="year" min="1900" max="2100" required>
<label for="year">年:</label>
<input type="number" id="month" class="linecolor"
name="month" min="1" max="12" required>
<label for="month">月:</label>
<button type="button" class="linecolor"
onclick="generateCalendar()">表示</button>
</div>
</form>
<div id="calendar"></div>
<script>
/* カレンダー表示 */
function generateCalendar() {
const year = document.getElementById('year').value;
const month = document.getElementById('month').value;
const calendarDiv = document.getElementById('calendar');
calendarDiv.innerHTML = '';
const date = new Date(year, month - 1);
const daysInMonth = new Date(year, month, 0).getDate();
const firstDay = new Date(year, month - 1, 1).getDay();
/* カレンダーテーブル設定 */
let table = '<table>';
table += '<tr><th>日</th><th>月</th>’+
’<th>火</th><th>水</th><th>木</th>’+
'<th>金</th><th>土</th></tr>';
table += '<tr>';
for (let i = 0; i < firstDay; i++) {
table += '<td></td>';
}
for (let day = 1; day <= daysInMonth; day++) {
if ((firstDay + day - 1) % 7 === 0 && day !== 1) {
table += '</tr><tr>';
}
table += `<td>${day}</td>`;
}
table += '</tr></table>';
calendarDiv.innerHTML = table;
/*
innerHTML は、JavaScriptで使用されるプロパティで、
HTML要素の内部コンテンツ（子要素やテキストなど）を
取得または設定するために使用される。
innerHTML を使用すると、特定の要素内に含まれる
HTMLコード全体を操作できる。
ここでは
<div id="calendar"></div>
calendarDiv.innerHTML = table;
*/
}
</script>
</div>
</body>
</html>
<!-- index.html -->
実行したら・・・
西暦と月を入力して［表示］をクリックすればカレンダーが表示されます。
関ヶ原の戦いは、安土桃山時代の慶長5年9月15日（1600年10月21日）に、美濃国不破郡関ヶ原（岐阜県不破郡関ケ原町）を主戦場として行われた合戦。土曜日だったんですね。
