refactor: Use client's preferred format for date and time instead of assuming it in the client-side code

Signed-off-by: Felicitas Pojtinger <felicitas@pojtinger.com>

Author: pojntfx

assets/js/event-detail-modal.js

@@ -138,18 +138,18 @@ customElements.define(
           day: "numeric",
           timeZone: data.timezone || undefined,
         };
-        $("date").textContent = start.toLocaleDateString("en-CA", dateOpts);
+        $("date").textContent = start.toLocaleDateString(undefined, dateOpts);
 
         const timeOpts = {
           hour: "numeric",
           minute: "2-digit",
           timeZone: data.timezone || undefined,
           timeZoneName: data.timezone ? "short" : undefined,
         };
-        let timeText = start.toLocaleTimeString("en-CA", timeOpts);
+        let timeText = start.toLocaleTimeString(undefined, timeOpts);
         if (data.end_at) {
           const end = new Date(data.end_at);
-          timeText += " – " + end.toLocaleTimeString("en-CA", timeOpts);
+          timeText += " – " + end.toLocaleTimeString(undefined, timeOpts);
         }
         $("time").textContent = timeText;
 

assets/js/events.js

@@ -1,14 +1,15 @@
-export const formatEvent = (evt) => {
+export const formatEvent = (evt, api) => {
   const start = new Date(evt.start_at);
   const days = Math.ceil((start - new Date()) / 86400000);
   return {
+    apiId: evt.api_id,
     name: evt.name || "VanLUG Meeting",
-    date: start.toLocaleDateString("en-CA", {
+    date: start.toLocaleDateString(undefined, {
       weekday: "short",
       month: "short",
       day: "numeric",
     }),
-    time: start.toLocaleTimeString("en-CA", {
+    time: start.toLocaleTimeString(undefined, {
       hour: "numeric",
       minute: "2-digit",
     }),

assets/js/mastodon-feed.js

@@ -53,7 +53,7 @@ const renderToot = (toot, data, { isFirst, isLast, inDrawer, profile }) => {
   avatar.alt = data.userDisplayName;
 
   $("timestamp").textContent = new Date(toot.timestamp).toLocaleDateString(
-    "en-CA",
+    undefined,
     { month: "short", day: "numeric" },
   );