Events Month Calendar

<!--
  A month grid that carries content, so cells are align-top and event chips
  truncate rather than wrap the column wider. Only two chips show; the rest
  collapse to "+N more" so a busy day cannot blow the row height out. "Today"
  is a filled disc on the date number, independent of any event styling.
-->
<div class="w-full max-w-2xl rounded-2xl border border-gray-200 bg-white p-3 dark:border-gray-800 dark:bg-gray-900">
  <h2 class="mb-2 px-1 text-sm font-semibold text-gray-900 dark:text-gray-100">July 2026</h2>
  <table class="w-full table-fixed border-collapse">
    <thead>
      <tr>
            <th scope="col" class="pb-2 text-center text-xs font-medium text-gray-500 dark:text-gray-400"><span aria-hidden="true">Su</span><span class="sr-only">Sunday</span></th>
            <th scope="col" class="pb-2 text-center text-xs font-medium text-gray-500 dark:text-gray-400"><span aria-hidden="true">Mo</span><span class="sr-only">Monday</span></th>
            <th scope="col" class="pb-2 text-center text-xs font-medium text-gray-500 dark:text-gray-400"><span aria-hidden="true">Tu</span><span class="sr-only">Tuesday</span></th>
            <th scope="col" class="pb-2 text-center text-xs font-medium text-gray-500 dark:text-gray-400"><span aria-hidden="true">We</span><span class="sr-only">Wednesday</span></th>
            <th scope="col" class="pb-2 text-center text-xs font-medium text-gray-500 dark:text-gray-400"><span aria-hidden="true">Th</span><span class="sr-only">Thursday</span></th>
            <th scope="col" class="pb-2 text-center text-xs font-medium text-gray-500 dark:text-gray-400"><span aria-hidden="true">Fr</span><span class="sr-only">Friday</span></th>
            <th scope="col" class="pb-2 text-center text-xs font-medium text-gray-500 dark:text-gray-400"><span aria-hidden="true">Sa</span><span class="sr-only">Saturday</span></th>
      </tr>
    </thead>
    <tbody>
          <tr>
            <td class="p-0.5 align-top" aria-hidden="true"></td>
            <td class="p-0.5 align-top" aria-hidden="true"></td>
            <td class="p-0.5 align-top" aria-hidden="true"></td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">1</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">2</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">3</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">4</span>
                <ul class="flex flex-col gap-0.5">
              <li class="truncate rounded px-1 py-0.5 text-left text-[0.65rem] leading-tight bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Holiday</li>
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">5</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">6</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">7</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">8</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">9</span>
                <ul class="flex flex-col gap-0.5">
              <li class="truncate rounded px-1 py-0.5 text-left text-[0.65rem] leading-tight bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Team sync</li>
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">10</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">11</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">12</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">13</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">14</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">15</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">16</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-blue-600 text-[0.7rem] font-semibold text-white" aria-current="date">17</span>
                <ul class="flex flex-col gap-0.5">
              <li class="truncate rounded px-1 py-0.5 text-left text-[0.65rem] leading-tight bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Design review</li>
              <li class="truncate rounded px-1 py-0.5 text-left text-[0.65rem] leading-tight bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">1:1 with Sam</li>
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">18</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">19</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">20</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">21</span>
                <ul class="flex flex-col gap-0.5">
              <li class="truncate rounded px-1 py-0.5 text-left text-[0.65rem] leading-tight bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Product launch</li>
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">22</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">23</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">24</span>
                <ul class="flex flex-col gap-0.5">
              <li class="truncate rounded px-1 py-0.5 text-left text-[0.65rem] leading-tight bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Sprint demo</li>
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">25</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">26</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">27</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">28</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">29</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">30</span>
                <ul class="flex flex-col gap-0.5">
              <li class="truncate rounded px-1 py-0.5 text-left text-[0.65rem] leading-tight bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Retro</li>
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top">
              <div class="flex min-h-[3.75rem] flex-col gap-0.5 rounded-lg border border-transparent p-1 hover:border-gray-200 dark:hover:border-gray-800">
                <span class="text-[0.7rem] font-medium text-gray-500 dark:text-gray-400">31</span>
                <ul class="flex flex-col gap-0.5">
                </ul>
              </div>
            </td>
            <td class="p-0.5 align-top" aria-hidden="true"></td>
          </tr>
    </tbody>
  </table>
</div>