fix: timezone fixes (#386)

directus/extensions/directus-extension-events/src/events/get.ts

@@ -1,6 +1,9 @@
 import {AdminAccountability, isUserLeader} from "./utils";
 import {RRule} from "rrule";
-import {setHours, setMinutes, setSeconds, startOfDay} from "date-fns";
+import { startOfDay } from "date-fns";
+import { utcToZonedTime } from 'date-fns-tz';
+
+const timeZone = "Europe/London";
 
 export async function getConsentInfo(req: any, res: any, services: any, database: any) {
   const {
@@ -146,7 +149,6 @@ export async function getConsentInfo(req: any, res: any, services: any, database
   }
 }
 
-
 export async function get(req: any, res: any, services: any, database: any) {
   const {
     ItemsService
@@ -242,14 +244,34 @@ export async function get(req: any, res: any, services: any, database: any) {
         continue;
       }
 
-      const rule = RRule.fromString(event.rrule);
-      const occurrences = rule.between(start, end, true);
-      const eventStartDay = startOfDay(new Date(event.start_date));
+      // Parse event start and end dates in 'Europe/London' time zone
+      const eventStartDate = utcToZonedTime(event.start_date, timeZone);
+      const eventEndDate = utcToZonedTime(event.end_date, timeZone);
+
+      // Parse RRULE with time zone information
+      const ruleOptions = RRule.parseString(event.rrule);
+      ruleOptions.dtstart = eventStartDate;
+      ruleOptions.tzid = timeZone;
+
+      const rule = new RRule(ruleOptions);
+
+      // Ensure 'start' and 'end' are in 'Europe/London' time zone
+      const startLondon = utcToZonedTime(start, timeZone);
+      const endLondon = utcToZonedTime(end, timeZone);
+
+      // Get occurrences in the specified time range
+      const occurrences = rule.between(startLondon, endLondon, true);
+
+      const eventStartDay = startOfDay(eventStartDate);
 
       for (const occurrence of occurrences) {
+        // occurrence is in 'Europe/London' time zone
+        // Adjust end date based on duration
+        const duration = eventEndDate.getTime() - eventStartDate.getTime();
+        const combinedEndDate = new Date(occurrence.getTime() + duration);
+
+        // Calculate instance number
         const instances = rule.between(eventStartDay, occurrence, true);
-        const endDate = new Date(event.end_date);
-        const combinedEndDate = setHours(setMinutes(setSeconds(occurrence, endDate.getSeconds()), endDate.getMinutes()), endDate.getHours());
 
         events.push({
           ...event,

frontend/src/components/base/DatePicker.vue

@@ -1,14 +1,13 @@
 <template>
   <vue-date-picker
     v-model="internalValue"
-    :format="formatDate"
+    :is24="false"
     :placeholder="placeholder"
     auto-apply
     :close-on-auto-apply="false"
     :enable-time-picker="enableTimePicker ?? false"
     :min-date="minDate"
     :max-date="maxDate"
-    utc
     locale="en-GB">
     <template #calendar-icon>
       <span class="dp__clock-icon">

frontend/src/components/events/UpcomingList.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import {
-  addYears, format
-} from "date-fns";
+import { addYears } from "date-fns";
+import {utcToZonedTime, format} from "date-fns-tz";
 import { ExclamationTriangleIcon } from "@heroicons/vue/16/solid";
 import type { EventItem } from "~/types";
 
@@ -72,8 +71,13 @@ function formatDate (event: EventItem) {
   if (props.dateFormatter) {
     return props.dateFormatter(event);
   } else {
-    let result = format(new Date(event.start_date), "do MMMM yyyy, ");
-    result += `${formatShortTime(new Date(event.start_date))} - ${formatShortTime(new Date(event.end_date))}`;
+    const timeZone = "Europe/London";
+    const dateStart = new Date(event.start_date);
+    const dateEnd = new Date(event.end_date);
+    const localStartTime = utcToZonedTime(dateStart, timeZone);
+    const localEndTime = utcToZonedTime(dateEnd, timeZone);
+    let result = format(localStartTime, "do MMMM yyyy, ", { timeZone });
+    result += `${formatShortTime(localStartTime)} - ${formatShortTime(localEndTime)}`;
     return result;
   }
 }

frontend/src/components/events/wizard/EventComplianceStep.vue

@@ -143,6 +143,7 @@ watch(() => event.value.paddleType, (val) => {
       class="space-y-2">
       <input-radio-group
         v-model="selectedPaddleType"
+        label="Paddle type"
         :disabled="!eventType || eventType.id === 'meetings'"
         :required="eventType && eventType.id !== 'meetings'"
         by="id"

frontend/src/components/events/wizard/RecurringRuleStep.vue

@@ -33,16 +33,6 @@ function useExample (example: string) {
 
 const previewDates = ref<string[]>([]);
 
-function toDatetime (date: Date | string) {
-  const newDate = new Date(date);
-  return datetime(newDate.getUTCFullYear(),
-    newDate.getUTCMonth() + 1,
-    newDate.getUTCDate(),
-    newDate.getUTCHours(),
-    newDate.getUTCMinutes(),
-    newDate.getUTCSeconds());
-}
-
 watch(() => event.value.rrule, (val) => {
   console.log("CHANGE", val);
   if (!val) {
@@ -118,24 +108,22 @@ const exampleEvents = computed(() => [{
 
     <div>
       <ul class="flex flex-wrap gap-3">
-        <ul class="flex flex-wrap gap-3">
-          <li
-            v-for="(example, index) in examples"
-            :key="index">
-            <button
-              class="rounded bg-indigo-50 px-2 py-1 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100 border border-indigo-300"
-              @click="() => useExample(example)">
-              {{ example }}
-            </button>
-          </li>
-        </ul>
+        <li
+          v-for="(example, index) in examples"
+          :key="index">
+          <button
+            class="rounded bg-indigo-50 px-2 py-1 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100 border border-indigo-300"
+            @click="() => useExample(example)">
+            {{ example }}
+          </button>
+        </li>
       </ul>
     </div>
 
     <hr>
 
     <div class="space-y-5">
-      <span>Preview the dates here; days with a circle indicate when this event will occur.</span>
+      <span>Preview the dates here; circled dates indicate when this event will occur.</span>
       <small-calendar
         :events="exampleEvents" />
     </div>

frontend/src/components/events/wizard/SingleDateStep.vue

@@ -41,7 +41,7 @@ watch(() => event.value.startDate, (val) => {
   }
 
   if (!event.value.endDate || event.value.endDate < val) {
-    event.value.endDate = formatISO(addHours(new Date(val), 1));
+    event.value.endDate = addHours(new Date(val), 1);
   }
 });
 

frontend/src/pages/index.vue

@@ -113,8 +113,9 @@
 <script setup lang="ts">
 import { HandRaisedIcon } from "@heroicons/vue/24/outline";
 import { ChevronRightIcon } from "@heroicons/vue/24/solid";
-import { format, addDays, startOfDay, endOfDay, setHours, setMinutes, setSeconds } from "date-fns";
+import { addDays, endOfDay } from "date-fns";
 import type { EventItem, Home, NewsItem } from "~/types";
+import {utcToZonedTime, format} from "date-fns-tz";
 
 definePageMeta({
   layout: "no-container"
@@ -129,18 +130,18 @@ const { data: home } = await useAsyncData("home", async () => {
   });
 });
 
-const eventsStart = new Date();
-const eventsEnd = endOfDay(addDays(eventsStart, 7));
-
 function eventDateFormatter (event: EventItem) {
-  const startDate = new Date(event.start_date);
-  const endDate = new Date(event.end_date);
+  const timeZone = "Europe/London";
+
+  const localStartDate = utcToZonedTime(new Date(event.start_date), timeZone);
+  const localEndDate = utcToZonedTime(new Date(event.end_date), timeZone);
+  console.log("local", event.start_date, localStartDate)
 
-  const startDay = format(startDate, "iiii do");
-  const startTime = formatShortTime(startDate);
+  const startDay = format(localStartDate, "iiii do", {timeZone});
+  const startTime = formatShortTime(localStartDate);
 
-  const endDay = format(endDate, "iiii do");
-  const endTime = formatShortTime(endDate);
+  const endDay = format(localEndDate, "iiii do", {timeZone});
+  const endTime = formatShortTime(localEndDate);
 
   if (startDay !== endDay) {
     return `${startDay} @ ${startTime} to ${endDay} @ ${endTime}`;
@@ -149,6 +150,9 @@ function eventDateFormatter (event: EventItem) {
   return `${startDay} @ ${startTime} - ${endTime}`;
 }
 
+const eventsStart = new Date();
+const eventsEnd = endOfDay(addDays(eventsStart, 7));
+
 const dateRangeLabel = computed(() => {
   const startMonth = format(eventsStart, "MMM");
   const endMonth = format(eventsEnd, "MMM");

frontend/src/utils/strings.ts

@@ -1,4 +1,4 @@
-import { format } from "date-fns";
+import { format } from "date-fns-tz";
 
 export function capitalize (input: string) {
   return input[0].toUpperCase() + input.slice(1);
@@ -11,11 +11,12 @@ export function clickOrTap (shouldCapitalize?: boolean) {
 }
 
 export function formatShortTime (input: Date | string) {
+  const timeZone = "Europe/London";
   const date = new Date(input);
   const minutes = format(date, "mm");
   if (minutes === "00") {
-    return format(date, "haa").toLowerCase();
+    return format(date, "haa", {timeZone}).toLowerCase();
   } else {
-    return format(date, "h:mmaa").toLowerCase();
+    return format(date, "h:mmaa", {timeZone}).toLowerCase();
   }
 }