calendar update

index.html

@@ -186,6 +186,7 @@
         <div class="cal-sidebar">
           <h3>Upcoming</h3>
           <div id="cal-sidebar-list"><p class="cal-side-empty">Loading...</p></div>
+          <p class="cal-tz-note">All times shown in your local timezone</p>
         </div>
       </div>
     </section>

js/calendar.js

@@ -1,4 +1,4 @@
-// Calendar tab — monthly grid + sidebar + day hover popups
+// Calendar tab — country-timezone-aware, auto-converts to your local time
 const CAL_FB_CONFIG = {
     apiKey: "AIzaSyDuSjEGEKx5FnWYnQq8f_owbpYRBRrl5x0",
     authDomain: "esef-514bf.firebaseapp.com",
@@ -12,6 +12,20 @@ const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 const MONTHS = ["January","February","March","April","May","June",
                 "July","August","September","October","November","December"];
 
+function fmtTime(utcIso, time, country) {
+    if (utcIso) {
+        try {
+            var d = new Date(utcIso);
+            if (!isNaN(d.getTime())) {
+                var local = d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+                if (country) local += " (" + country + ")";
+                return local;
+            }
+        } catch (e) {}
+    }
+    return (time || "") + (country ? " (" + country + ")" : "");
+}
+
 document.addEventListener("DOMContentLoaded", () => {
     const tab = document.getElementById("calendar");
     if (!tab) return;
@@ -35,11 +49,14 @@ document.addEventListener("DOMContentLoaded", () => {
                 title: d.title || "",
                 date: d.date || "",
                 time: d.time || "",
+                country: d.country || "",
+                utc: d.utc || "",
                 description: d.description || "",
-                createdBy: d.createdBy || ""
+                createdBy: d.createdBy || "",
+                _sort: d.utc || (d.date + "T" + (d.time || "00:00"))
             });
         });
-        allEvents.sort((a, b) => (a.date + a.time).localeCompare(b.date + b.time));
+        allEvents.sort((a, b) => a._sort.localeCompare(b._sort));
         render();
     }, () => {
         if (gridEl) gridEl.innerHTML = '<p class="cal-side-empty">Could not load.</p>';
@@ -53,14 +70,12 @@ document.addEventListener("DOMContentLoaded", () => {
         const month = viewDate.getMonth();
         navEl.textContent = MONTHS[month] + " " + year;
 
-        // Group events by date for quick lookup
         const byDate = {};
         allEvents.forEach(e => {
             if (!byDate[e.date]) byDate[e.date] = [];
             byDate[e.date].push(e);
         });
 
-        // Build grid
         const firstDay = new Date(year, month, 1).getDay();
         const daysInMonth = new Date(year, month + 1, 0).getDate();
         const today = new Date();
@@ -86,17 +101,16 @@ document.addEventListener("DOMContentLoaded", () => {
             html += '<div class="cal-day' +
                 (isToday ? " today" : "") +
                 (hasEvents ? " has-events" : "") + '">';
-
             html += '<div class="day-num">' + d + "</div>";
-            if (hasEvents) {
-                // Dot indicators
-                dayEvents.forEach(() => html += '<span class="day-dot"></span>');
 
-                // Hover popup
+            if (hasEvents) {
+                dayEvents.forEach(() => html += '<span class="day-dot"></span>');
                 html += '<div class="cal-popup"><h4>' + dateStr + "</h4>";
                 dayEvents.forEach(e => {
                     html += '<div class="cal-popup-item">';
-                    if (e.time) html += '<span class="pop-time">' + e.time + "</span>";
+                    if (e.time) {
+                        html += '<span class="pop-time">' + fmtTime(e.utc, e.time, e.country) + "</span> ";
+                    }
                     html += esc(e.title);
                     if (e.description) html += '<div class="pop-desc">' + esc(e.description) + "</div>";
                     html += "</div>";
@@ -108,14 +122,14 @@ document.addEventListener("DOMContentLoaded", () => {
 
         gridEl.innerHTML = html;
 
-        // Sidebar: upcoming events
         const upcoming = allEvents.filter(e => e.date >= todayStr);
         if (upcoming.length === 0) {
-            sidebarEl.innerHTML = '<p class="cal-side-empty">No upcoming events.<br>Use !book in Discord.</p>';
+            sidebarEl.innerHTML = '<p class="cal-side-empty">No upcoming events.<br>Use /book in Discord.</p>';
         } else {
             sidebarEl.innerHTML = upcoming.slice(0, 15).map(e =>
                 '<div class="cal-side-event">' +
-                '<div class="se-date">' + e.date + (e.time ? " at " + e.time : "") + "</div>" +
+                '<div class="se-date">' + e.date +
+                (e.time ? " " + fmtTime(e.utc, e.time, e.country) : "") + "</div>" +
                 '<div class="se-title">' + esc(e.title) + "</div>" +
                 (e.description ? '<div class="se-desc">' + esc(e.description) + "</div>" : "") +
                 "</div>"

style/calendar.css

@@ -116,3 +116,5 @@
     text-align: center; color: rgba(255,255,255,0.2); padding: 30px 0;
     font-family: Arial, sans-serif; font-size: 0.8rem;
 }
+
+.cal-tz-note { font-size: 0.65rem; color: rgba(255,255,255,0.18); text-align: center; margin-top: 16px; }