New Clock added to Calender Feature

assets/css/style.css

@@ -770,6 +770,30 @@ body.header-tone-light .app-header .tab.active {
     }
 }
 
+/* TV calendar: inset from screen edges (replaces tight container-fluid padding) */
+.calendar-tv-shell {
+    padding: clamp(1.25rem, 3vw, 2.75rem);
+}
+
+/* TV calendar: more space around the Google embed and between columns */
+.calendar-tv-view > .calendar-tab-layout.row {
+    --bs-gutter-x: clamp(1.25rem, 2.5vw, 2.5rem);
+    --bs-gutter-y: clamp(1.25rem, 2.5vw, 2.5rem);
+}
+
+.calendar-tv-view .calendar-tab-google .calendar-embed {
+    margin-top: 0.75rem;
+}
+
+.calendar-tv-clock-time {
+    display: block;
+    font-size: clamp(15.75rem, 36vw, 24.75rem);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.02em;
+    line-height: 1.2;
+}
+
 .calendar-tv-view .calendar-embed iframe {
     min-height: 70vh;
 }
@@ -799,6 +823,10 @@ body.calendar-tv-dark .calendar-tv-view h3 {
     color: #f1f5f9;
 }
 
+body.calendar-tv-dark .calendar-tv-view .calendar-tv-clock-time {
+    color: #f8fafc;
+}
+
 body.calendar-tv-dark .calendar-tv-view .text-muted {
     color: #94a3b8 !important;
 }

index.php

@@ -167,7 +167,7 @@ if (fhRelativeLuminance($themePalette['primary']) >= 0.62) {
 include 'includes/header.php';
 ?>
 
-<div class="<?= $isCalendarTvView ? 'container-fluid px-2 py-0' : 'container' ?>">
+<div class="<?= $isCalendarTvView ? 'container-fluid calendar-tv-shell' : 'container' ?>">
     <div class="tab-content" id="dashboardContentArea">
         <?php include 'tabs/' . $activeTab . '.php'; ?>
     </div>

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; ?>