javascript:カレンダーをつくろう

JavaScriptを使用して、HTMLとCSSと組み合わせて簡単なカレンダーを作成することができます。以下に、JavaScriptを使ってカレンダーを作成する方法の例を示します。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Calendar - 1 Year</title>
<style>
  .calendar {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
  }
  .calendar th, .calendar td {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px;
  }
  .calendar th {
    background-color: #f2f2f2;
  }
  .calendar td {
    cursor: pointer;
  }
  .calendar td:hover {
    background-color: #f0f0f0;
  }
</style>
</head>
<body>

<h2>JavaScript Calendar - 1 Year</h2>

<div id="calendars"></div>

<script>
  // カレンダーを表示する関数
  function displayCalendar(year, month, container) {
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const firstDayOfMonth = new Date(year, month, 1).getDay();
    const calendarTable = document.createElement("table");
    calendarTable.classList.add("calendar");
    calendarTable.innerHTML = `
      <thead>
        <tr>
          <th colspan="7">${new Date(year, month, 1).toLocaleString('default', { month: 'long' })} ${year}</th>
        </tr>
        <tr>
          <th>Sun</th>
          <th>Mon</th>
          <th>Tue</th>
          <th>Wed</th>
          <th>Thu</th>
          <th>Fri</th>
          <th>Sat</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    `;
    const tbody = calendarTable.querySelector("tbody");
    let date = 1;
    for (let i = 0; i < 6; i++) {
      const row = document.createElement("tr");
      for (let j = 0; j < 7; j++) {
        if (i === 0 && j < firstDayOfMonth) {
          const cell = document.createElement("td");
          row.appendChild(cell);
        } else if (date > daysInMonth) {
          break;
        } else {
          const cell = document.createElement("td");
          cell.textContent = date;
          cell.addEventListener("click", function() {
            alert(`Clicked on ${year}-${month + 1}-${this.textContent}`);
          });
          row.appendChild(cell);
          date++;
        }
      }
      tbody.appendChild(row);
    }
    container.appendChild(calendarTable);
  }

  // 1年分のカレンダーを表示
  const calendarsContainer = document.getElementById("calendars");
  const currentYear = new Date().getFullYear();
  for (let i = 0; i < 12; i++) {
    displayCalendar(currentYear, i, calendarsContainer);
  }
</script>

</body>
</html>