Highlight active half-hour cell

css/calendar.css

@@ -73,6 +73,9 @@
 .calendar tbody tr td.hour span {
   display: block;
 }
+.calendar tbody tr td.active {
+  border: 1px solid yellow;
+}
 #pointer {
   position: absolute;
   left: 0;
@@ -83,6 +86,9 @@
 .pointer-label {
   color: red;
 }
+.pointer-label-wrapper {
+  color: yellow;
+}
 .show-title {
   position: relative;
   z-index: 2;

schedule/calendar.php

@@ -66,21 +66,26 @@ for ($i = 0; $i < 86400; $i += 1800) {
         break;
       }
     }
+    $active = false;
+    if (!$wrotepointer) {
+      // If current time is in this range, draw pointer.
+      $end = DateTimeImmutable::createFromMutable($merge)->add($halfhour);
+      if ($now >= $merge && $now < $end) {
+        $active = true;
+        $props .= ' class="active"';
+      }
+    }
     echo "<td $props>";
     if ($matchedshow) {
         echo '<div class="show-title">'.$matchedshow['title'].'</div>';
         // if no match was found, leave an empty node
     }
-    if (!$wrotepointer) {
-        // If current time is in this range, draw pointer.
-        $end = DateTimeImmutable::createFromMutable($merge)->add($halfhour);
-        if ($now >= $merge && $now < $end) {
-            // Cell height here should be synced with height of '.calendar tbody tr td' in ../css/calendar.css
-            $height = 32;
-            $top = round(date_diff($merge, $now)->format('%i') / 30 * ($height-1));
-            echo '<div id="pointer" style="top:'.$top.'px"></div>';
-        }
-        $wrotepointer = true;
+    if ($active) {
+      // Cell height here should be synced with height of '.calendar tbody tr td' in ../css/calendar.css
+      $height = 32;
+      $top = round(date_diff($merge, $now)->format('%i') / 30 * ($height-1));
+      echo '<div id="pointer" style="top:'.$top.'px"></div>';
+      $wrotepointer = true;
     }
     echo "</td>\n";
   }

schedule/index.php

@@ -6,7 +6,8 @@ include 'schedule.php';
 
 <h1><a href="https://tilderadio.org"><img style="width:72px;margin-top:-30px;margin-right:5px;" src="../logos/tilderadio.png">tilderadio.org</a></h1>
 <h4>upcoming broadcasts</h4>
-<p>all times in UTC. current time is <span id="utcdate"><?=formatdate("now")?></span> (<span class="pointer-label">&mdash;</span>).</p>
+<p>all times in UTC. current time is <span id="utcdate"><?=formatdate("now")?></span>
+<span class="pointer-label-wrapper">(</span><span class="pointer-label">&mdash;</span><span class="pointer-label-wrapper">)</span>.</p>
 <p>this schedule is also available in <a href="https://icalendar.org/validator.html?url=https://tilderadio.org/schedule/ics.php">iCalendar format</a>. point your calendar client at <code>https://tilderadio.org/schedule/ics.php</code>.</p>
 
 <?php
@@ -93,6 +94,9 @@ function updatePointer(d) {
     }
     // Move pointer to different cell if changed cell.
     if (range !== prevRange) {
+        const prevCell = prevRange && prevRange.cell
+        if (prevCell) prevCell.classList.remove('active');
+        range.cell.classList.add('active');
         range.cell.appendChild(pointer);
     }
     // Move pointer based on time in current cell.