Improved the presentation forecast.

app/index.css

@@ -30,3 +30,23 @@ body.phone .logo {
 body.phone .calBanner .col:first-child {
   display: none;
 }
+.calGridTable {
+  white-space: nowrap;
+}
+.calGridTable th {
+  background-color: #f3f3f3;
+  font-weight: normal;
+  font-size: 0.85em;
+}
+.cal-grid-label {
+  font-weight: bold;
+  background-color: #f3f3f3;
+}
+.cal-grid-cell {
+  cursor: pointer;
+  font-size: 0.9em;
+}
+.cal-grid-cell:hover {
+  background-color: #94b6bd;
+  color: #ffffff;
+}

app/index.js

@@ -2,6 +2,19 @@ $(document).ready(function () {
   var nextCtl = $('#vars').attr('nextCtl');
   var c = $('button.accordion-button[data-bs-target="#ctl' + nextCtl + '"]');
   $(c).click();
+
+  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+    new bootstrap.Tooltip(el);
+  });
+
+  $('.cal-grid-cell').click(function() {
+    var ctl = $(this).data('ctl');
+    var btn = $('button.accordion-button[data-bs-target="#ctl' + ctl + '"]');
+    if (btn.hasClass('collapsed')) {
+      btn.click();
+    }
+    btn.closest('.accordion-item')[0].scrollIntoView({ behavior: 'smooth', block: 'start' });
+  });
   $('button[action]').click(function() {
     var action = $(this).attr('action');
     var url = null;

app/index.php

@@ -90,11 +90,55 @@ use Michelf\Markdown;
           </p>
         </div>
       </div>
+      <?php
+      $events = getEvents();
+      $now = new DateTime();
+      $futureEvents = array_reverse(array_values(array_filter($events, function($e) use ($now) {
+        return (new DateTime($e['start'])) >= (new DateTime('today'));
+      })));
+      ?>
+      <div class="row mt-4 calGrid">
+        <div class="col">
+          <table class="table table-bordered calGridTable">
+            <thead>
+              <tr>
+                <th></th>
+                <?php foreach ($futureEvents as $event): ?>
+                <th class="text-center"><?= (new DateTime($event['start']))->format('j M') ?></th>
+                <?php endforeach; ?>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td class="cal-grid-label">Presentation 1</td>
+                <?php foreach ($futureEvents as $event): ?>
+                <td class="text-center cal-grid-cell"
+                    data-ctl="<?= $event['ctl'] ?>"
+                    <?php if (!empty($event['presentation1']['topic'])): ?>
+                    data-bs-toggle="tooltip" data-bs-placement="top" title="<?= htmlspecialchars($event['presentation1']['topic']) ?>"
+                    <?php endif; ?>>
+                  <?= htmlspecialchars($event['presentation1']['presenter'] ?? '') ?>
+                </td>
+                <?php endforeach; ?>
+              </tr>
+              <tr>
+                <td class="cal-grid-label">Presentation 2</td>
+                <?php foreach ($futureEvents as $event): ?>
+                <td class="text-center cal-grid-cell"
+                    data-ctl="<?= $event['ctl'] ?>"
+                    <?php if (!empty($event['presentation2']['topic'])): ?>
+                    data-bs-toggle="tooltip" data-bs-placement="top" title="<?= htmlspecialchars($event['presentation2']['topic']) ?>"
+                    <?php endif; ?>>
+                  <?= htmlspecialchars($event['presentation2']['presenter'] ?? '') ?>
+                </td>
+                <?php endforeach; ?>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
       <div class="row mt-2 calDetails">
         <div class="col">
-          <?php
-          $events = getEvents();
-          ?>
           <div class="accordion" id="accordionExample">
             <?php
             $nextCtl = null;