JavaScript で カレンダーを作成
今月のカレンダーです
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|
プログラム
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カレンダー</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
text-align: center;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
.today {
background-color: #ffeb3b;
}
</style>
</head>
<body>
<h1 id="current-date"></h1>
<table id="calendar">
<thead>
<tr>
<th>日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
function generateCalendar(year, month) {
const daysInWeek = ['日', '月', '火', '水', '木', '金', '土'];
const firstDayOfMonth = new Date(year, month, 1);
const lastDayOfMonth = new Date(year, month + 1, 0);
const calendarBody = document.querySelector('#calendar tbody');
let date = 1;
while (calendarBody.firstChild) {
calendarBody.removeChild(calendarBody.firstChild);
}
for (let week = 0; week < 6; week++) {
const row = document.createElement('tr');
for (let day = 0; day < 7; day++) {
const cell = document.createElement('td');
if ((week === 0 && day < firstDayOfMonth.getDay()) || date > lastDayOfMonth.getDate()) {
cell.textContent = '';
} else {
cell.textContent = date;
if (date === new Date().getDate() && year === new Date().getFullYear() && month === new Date().getMonth()) {
cell.classList.add('today');
}
date++;
}
row.appendChild(cell);
}
calendarBody.appendChild(row);
}
}
function displayCurrentDate() {
const today = new Date();
document.getElementById('current-date').textContent = `今日の日付: ${today.getFullYear()}年${today.getMonth() + 1}月${today.getDate()}日`;
}
document.addEventListener('DOMContentLoaded', () => {
const today = new Date();
displayCurrentDate();
generateCalendar(today.getFullYear(), today.getMonth());
});
</script>
</body>
</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>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
text-align: center;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
.today {
background-color: #ffeb3b;
}
</style>
</head>
<body>
<h1 id="current-date"></h1>
<button onclick="changeMonth(-1)">前月</button>
<button onclick="goToCurrentMonth()">今月</button>
<button onclick="changeMonth(1)">翌月</button>
<table id="calendar">
<thead>
<tr>
<th>日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
let currentYear, currentMonth;
function generateCalendar(year, month) {
const firstDayOfMonth = new Date(year, month, 1);
const lastDayOfMonth = new Date(year, month + 1, 0);
const calendarBody = document.querySelector('#calendar tbody');
let date = 1;
while (calendarBody.firstChild) {
calendarBody.removeChild(calendarBody.firstChild);
}
for (let week = 0; week < 6; week++) {
const row = document.createElement('tr');
for (let day = 0; day < 7; day++) {
const cell = document.createElement('td');
if ((week === 0 && day < firstDayOfMonth.getDay()) || date > lastDayOfMonth.getDate()) {
cell.textContent = '';
} else {
cell.textContent = date;
if (date === new Date().getDate() && year === new Date().getFullYear() && month === new Date().getMonth()) {
cell.classList.add('today');
}
date++;
}
row.appendChild(cell);
}
calendarBody.appendChild(row);
}
document.getElementById('current-date').textContent = `${year}年${month + 1}月`;
}
function changeMonth(offset) {
currentMonth += offset;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
} else if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
generateCalendar(currentYear, currentMonth);
}
function goToCurrentMonth() {
const today = new Date();
currentYear = today.getFullYear();
currentMonth = today.getMonth();
generateCalendar(currentYear, currentMonth);
}
document.addEventListener('DOMContentLoaded', () => {
goToCurrentMonth();
});
</script>
</body>
</html>