fix: added timezone offset to community events

Signed-off-by: veralex <alexey.verevkin@akvelon.com>

assets/js/events.js

@@ -1,5 +1,6 @@
 import * as params from "@params";
 import { format, addDays } from "date-fns";
+import { formatInTimeZone, getTimezoneOffset } from "date-fns-tz";
 
 (() => {
   const fromString = (template) => {
@@ -45,8 +46,10 @@ import { format, addDays } from "date-fns";
       event.getElementsByClassName("event__info")[0].href = e.url;
 
       e.schedule.forEach((item) => {
-        start = format(new Date(item.start), "MMM dd%, yyyy");
-        end = item.end ? format(new Date(item.end), " - dd") : "";
+        const startDate = new Date(item.start);
+        const endDate = new Date(item.end);
+        start = e.timezone ? formatInTimeZone(startDate, e.timezone, "MMM dd%, yyyy") : format(startDate, "MMM dd%, yyyy");
+        end = item.end ? ( e.timezone ? formatInTimeZone(endDate, e.timezone, " - dd") : format(endDate, " - dd")) : "";
         const title = start.replace("%", `${end}`);
 
         const eventItem = fromString(eventItemTemplate);
@@ -57,9 +60,10 @@ import { format, addDays } from "date-fns";
         item.time.forEach(({ start, end, content }) => {
           const eventCard = fromString(eventCardTemplate);
 
-          eventCard.getElementsByClassName("event__time")[0].innerHTML = start
-            ? `${format(new Date(start), 'HH:mm')}${format(new Date(end), 'HH:mm') ? ` - ${format(new Date(end), 'HH:mm')}` : ""}`
-            : "All day";
+          const startTime = start && (e.timezone ? formatInTimeZone(new Date(start), e.timezone, "HH:mm") : format(new Date(start), "HH:mm"));
+          const endTime = end && (e.timezone ? formatInTimeZone(new Date(end), e.timezone, "HH:mm") : format(new Date(end), "HH:mm"));
+
+          eventCard.getElementsByClassName("event__time")[0].innerHTML = start ? `${startTime} - ${endTime || "" } ${e.timezoneName || ""}` : "All day";
           const [eventContent] =
             eventCard.getElementsByClassName("event__content");
           eventContent.innerHTML = content.trim();

assets/js/slider.js

@@ -1,7 +1,5 @@
 const initSwiper = () =>
-  {
-    console.log('init')
-    new Swiper(".swiper", {
+  new Swiper(".swiper", {
     loop: false,
     slidesPerView: 1,
     slidesPerGroup: 1,
@@ -26,4 +24,4 @@ const initSwiper = () =>
       prevEl: ".swiper__control",
       disabledClass: "swiper__control--disabled",
     },
-  });}
+  });

assets/scss/_community.scss

@@ -221,15 +221,15 @@
 .event {
   &__time {
     @include media-breakpoint-up(md) {
-      min-width: 7rem;
+      min-width: 9rem;
     }
 
     @include media-breakpoint-up(lg) {
       min-width: 12rem;
     }
 
     @include media-breakpoint-up(sm) {
-      min-width: 7rem;
+      min-width: 9rem;
     }
   }
 

data/en/events.yaml

@@ -31,6 +31,8 @@
   url: /community/events/
   start: 2023-04-18T10:00:00+0200
   end: 2023-04-21T23:30:00+0200
+  timezone: Europe/Amsterdam
+  timezoneName: CEST
   schedule:
     - start: 2023-04-18T10:00:00+0200
       time:

layouts/partials/community/events.html

@@ -2,6 +2,6 @@
 {{ $events_sorted := sort $events "start" }}
 
 {{ $params := dict "events" $events_sorted "type" "community" }}
-{{ $js := resources.Get "js/events.js" | js.Build (dict "params" $params) | minify | fingerprint }}
+{{ $js := resources.Get "js/events.js" | js.Build (dict "params" $params) }}
 
 <script src="{{ $js.RelPermalink}}" async></script>

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "date-fns": "^2.29.3",
+    "date-fns-tz": "^2.0.0",
     "node-fetch": "^3.3.1"
   }
 }