New Clock added to Calender Feature

tabs/calendar.php

@@ -51,7 +51,7 @@ if ($embedUrl === null && $calId !== '' && $calId !== 'your_calendar_id_here') {
 
 [$rangeStart, $rangeEnd] = hubCalendarDefaultAgendaRange($familySettings);
 $events = hubCalendarAgendaEvents($rangeStart, $rangeEnd, $people, $familySettings);
-[, $tzLocal] = familyHubCalendarContext($familySettings);
+[$calendarTzId, $tzLocal] = familyHubCalendarContext($familySettings);
 $todayYmd = familyHubTodayYmdInTz($tzLocal);
 $twoWayMerge = !empty($familySettings['calendar_two_way_google']);
 $isTvView = isset($_GET['view']) && (string) $_GET['view'] === 'tv';
@@ -135,6 +135,11 @@ $iconByType = [
         </div>
         <div class="col-12 calendar-tab-agenda">
             <h3 class="h5 mb-3"><?= $isTvView ? 'Weekly hub' : 'Family Hub agenda' ?></h3>
+            <?php if ($isTvView): ?>
+            <div class="calendar-tv-clock mb-3" aria-hidden="true">
+                <time id="calendarTvClock" class="calendar-tv-clock-time"></time>
+            </div>
+            <?php endif; ?>
             <?php if (!$isTvView): ?>
             <p class="text-muted small mb-2">Hub data only (not Google Calendar).</p>
             <?php endif; ?>
@@ -183,15 +188,29 @@ $iconByType = [
 </div>
 <?php if ($isTvView): ?>
 <script>
+(function () {
+    var tz = <?= json_encode($calendarTzId, JSON_UNESCAPED_UNICODE) ?>;
+    var el = document.getElementById('calendarTvClock');
+    function tick() {
+        if (!el) {
+            return;
+        }
+        var now = new Date();
+        var opts = {
+            timeZone: tz,
+            hour: 'numeric',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: true
+        };
+        el.textContent = new Intl.DateTimeFormat(undefined, opts).format(now);
+        el.setAttribute('datetime', now.toISOString());
+    }
+    tick();
+    window.setInterval(tick, 1000);
     window.setTimeout(function () {
         window.location.reload();
     }, 10 * 60 * 1000);
-</script>
-<?php endif; ?>
-<?php if ($isTvView): ?>
-<script>
-    window.setTimeout(function () {
-        window.location.reload();
-    }, 10 * 60 * 1000);
+})();
 </script>
 <?php endif; ?>