3-14.イベントカレンダー テンプレ

<figure class="wp-block-table">
  <table class="has-fixed-layout table-base table-l">
    <!-- 1: 2026/07/19 - 2027/01/01 -->
    <tbody>
      <tr><td>7/19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
      <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
      <tr><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td>8/1</td></tr>
      <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
      <tr><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
      <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
      <tr><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr>
      <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
      <tr><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td></tr>
      <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
    </tbody>
    <!-- 2: 2026/08/23 - 2026/09/26 -->
    <tbody>
      <tr><td>8/23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td></tr>
      <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
      <tr><td>30</td><td>31</td><td>9/1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
      <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
      <tr><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
      <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
      <tr><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td></tr>
      <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
      <tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td></tr>
      <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
    </tbody>
    <!-- 3: 2026/09/27 - 2026/10/31 -->
    <tbody>
    … 略 …
    </tbody>
    <!-- 22: 2028/07/23 - 2028/08/26 -->
    <tbody>
      <tr><td>7/23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td></tr>
      <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
      <tr><td>30</td><td>31</td><td>8/1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
      <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
      <tr><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
      <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
      <tr><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td></tr>
      <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
      <tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td></tr>
      <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
    </tbody>
    <!-- 23: 2028/08/27 - 2028/09/20 -->
  </table>
</figure>

table {
  display: flex;
  flex-wrap: wrap;
}

tbody {
  border: solid 1px #ccc;
}

tr:nth-child(2n+1) td:nth-child(1) {
  background-color: lavenderblush;
}

tr:nth-child(2n+1) td:nth-child(7) {
  background-color: aliceblue;
}

tr:nth-child(2n+1) {
  text-align: center;
  background-color: whitesmoke;
}

td {
  text-align: center;
  padding: .2em .2em .21em !important;
  font-size: 13px;
}

// Highlight_Today_Date_Function
// 本日の日付ハイライト（年跨ぎと月自動取得・複数tbody対応 日付テスト内臓）
window.addEventListener('load', highlightTodayDate);

function highlightTodayDate() {
  // 🔸日付テストする場合は testDate に '2027-01-05' のように入力、実運用の場合は空文字のまま
  const testDate = '';
  
  const isTest = testDate !== '';
  const today = isTest ? new Date(testDate) : new Date();
  
  // テスト時のみコンソールに日付を出力
  if (isTest) {
    console.log('テスト日付 [' + testDate + '] でハイライト処理を実行。');
  }

  const todayYear = today.getFullYear();
  const todayMonth = today.getMonth() + 1;
  const todayDate = today.getDate();

  // 開始月を自動取得するため初期値をNaNとし、年の変数をカレンダーの 🔸最初の年を基準として明示的に設定
  let currentYear = 2026;
  let currentMonth = NaN;

  // すべての tbody を取得
  const tbodies = document.querySelectorAll('.wp-block-table table tbody');
  const dateRowIndices = [0, 2, 4, 6, 8];
  tbodies.forEach(tbody => {
    const rows = tbody.querySelectorAll('tr');

    dateRowIndices.forEach(rowIndex => {
      if (!rows[rowIndex]) return;

      const cells = rows[rowIndex].querySelectorAll('td');
      cells.forEach(cell => {
        const rawText = cell.textContent.trim();
        if (!rawText) return;

        // 月/日の判定（例: "7/19" や "8/1" など）
        if (rawText.includes('/')) {
          const match = rawText.match(/(\d+)\/(\d+)/);
          if (match) {
            const parsedMonth = parseInt(match[1], 10);
            const parsedDate = parseInt(match[2], 10);

            if (isNaN(currentMonth)) {
              // 最初の月が12月で本日の月が1月の場合、開始年は前年
              if (parsedMonth === 12 && todayMonth === 1) {
                currentYear = todayYear - 1;
              }
            } else {
              // 12月から1月へ変わった時に年を加算
              if (currentMonth === 12 && parsedMonth === 1) {
                currentYear++;
              }
            }
            currentMonth = parsedMonth;

            // ハイライト判定
            if (currentYear === todayYear && currentMonth === todayMonth && parsedDate === todayDate) {
              cell.style.boxShadow = 'inset 0 0 0 1.5px gray';
            }
          }
        } else {
          // 数字のみの判定（例: "20" や "31" など）
          const match = rawText.match(/\d+/);
          if (match) {
            const parsedDate = parseInt(match[0], 10);

            // ハイライト判定
            if (currentYear === todayYear && currentMonth === todayMonth && parsedDate === todayDate) {
              cell.style.boxShadow = 'inset 0 0 0 1.5px gray';
            }
          }
        }
      });
    });
  });
}