document.addEventListener('DOMContentLoaded', () => {
  // カレンダーの日付を表示する要素を取得
  const calendarBody = document.querySelector('.side-calendar__dates');
  const today = new Date(); // 現在の日付を取得


  const generateCalendar = (year, month) => {
    // カレンダーの中身を初期化（前の月のデータをクリア）
    calendarBody.innerHTML = '';

    // 指定した年月の1日が何曜日かを取得（0:日曜, 1:月曜, ..., 6:土曜）
    const firstDay = new Date(year, month, 1).getDay();

    // 指定した年月の日数を取得
    const daysInMonth = new Date(year, month + 1, 0).getDate();

    let date = 1; // カレンダーに表示する日付
    const rowsNeeded = Math.ceil((daysInMonth + firstDay) / 7); // 必要な行数を計算

    // 行（週単位）を作成
    for (let i = 0; i < rowsNeeded; i++) {
      const row = document.createElement('tr'); // 新しい行を作成

      // 列（曜日ごとのセル）を作成
      for (let j = 0; j < 7; j++) {
        const cell = document.createElement('td'); // 新しいセルを作成

        if (i === 0 && j < firstDay) {
          // 1週目で月の初日より前の曜日は空白にする
          cell.textContent = '';
        } else if (date <= daysInMonth) {
          // その月の日付を埋める
          cell.textContent = date;
          date++; // 次の日付へ
        } else {
          // その月の日付が終了したら空白のセルを埋める
          cell.textContent = '';
        }

        row.appendChild(cell); // 行にセルを追加
      }
      calendarBody.appendChild(row); // カレンダーに行を追加
    }
  };

  // 固定された年月でカレンダーを生成（2024年7月）
  const year = 2024;
  const month = 6; // 0から始まるため6は7月
  generateCalendar(year, month);
});