agenda: add time format setting and fix timezone issues (#140)

- Add 12h/24h time format preference (default: 12h)
- Fix events appearing on wrong day by using UTC for date grouping
- Fix time display offset by using timeZone: UTC (node-ical stores local as UTC)
- Fix section title date parsing to avoid timezone shifts
- Extract usePreferences hook for centralized preference access
- Add Preferences type to types.ts

Fixes #138

Author: knoopx

extensions/agenda/package-lock.json

@@ -57,6 +57,24 @@
         }
       ],
       "required": false
+    },
+    {
+      "name": "timeFormat",
+      "type": "dropdown",
+      "title": "Time Format",
+      "description": "How to display event times",
+      "default": "12h",
+      "data": [
+        {
+          "title": "12-hour (2:30 PM)",
+          "value": "12h"
+        },
+        {
+          "title": "24-hour (14:30)",
+          "value": "24h"
+        }
+      ],
+      "required": false
     }
   ],
   "scripts": {

extensions/agenda/package.json

@@ -1,6 +1,7 @@
 import { Action, ActionPanel, Icon, List } from "@vicinae/api";
 import type { VEvent } from "node-ical";
 import { Calendar } from "../types";
+import { usePreferences } from "../hooks/usePreferences";
 import { getCalendarName } from "../utils/calendar";
 import { getSupportedUrls, urlHandlers } from "../utils/urls";
 import { isAllDayEvent, getDisplayStart, getDisplayEnd } from "../utils/events";
@@ -20,11 +21,12 @@ export function EventListItem({
   onToggleDetail,
   calendars,
 }: EventListItemProps) {
+  const { use24Hour } = usePreferences();
   const startDate = new Date(event.start);
   const endDate = new Date(event.end);
   const isAllDay = isAllDayEvent(startDate, endDate);
-  const displayStart = getDisplayStart(startDate, isAllDay);
-  const displayEnd = getDisplayEnd(endDate, isAllDay);
+  const displayStart = getDisplayStart(startDate, isAllDay, use24Hour);
+  const displayEnd = getDisplayEnd(endDate, isAllDay, use24Hour);
   const calendar = eventCalendarUrl
     ? calendars.find((cal) => cal.url === eventCalendarUrl)
     : undefined;

extensions/agenda/src/components/EventListItem.tsx

@@ -5,7 +5,7 @@ import type { VEvent } from "node-ical";
 import { Calendar } from "../types";
 import { getCalendars, getCalendarName } from "../utils/calendar";
 import { saveToCache, loadFromCache } from "../utils/cache";
-import { isAllDayEvent, getDisplayStart } from "../utils/events";
+import { isAllDayEvent, getDisplayStart, getLocalDateString } from "../utils/events";
 import { CACHE_KEY } from "../constants";
 
 export function useCalendarData(refreshInterval: number) {
@@ -85,7 +85,7 @@ export function useCalendarData(refreshInterval: number) {
                     ...item,
                     start: occurrenceStartDate,
                     end: occurrenceEndDate,
-                    uid: `${item.uid}_${occurrenceStartDate.toISOString().split("T")[0]}`, // Make UID unique for each occurrence
+                    uid: `${item.uid}_${getLocalDateString(occurrenceStartDate)}`, // Make UID unique for each occurrence
                     recurrenceId: occurrenceStartDate,
                   };
 
@@ -141,21 +141,13 @@ export function useCalendarData(refreshInterval: number) {
           return a.summary.localeCompare(b.summary);
         }
 
-        // Both timed events
-        const aDisplayStart = getDisplayStart(aStart, aIsAllDay);
-        const bDisplayStart = getDisplayStart(bStart, bIsAllDay);
-        return (
-          new Date(
-            aStart.toISOString().split("T")[0] + "T" + aDisplayStart
-          ).getTime() -
-          new Date(
-            bStart.toISOString().split("T")[0] + "T" + bDisplayStart
-          ).getTime()
-        );
+        // Both timed events - sort by actual start time
+        return aStart.getTime() - bStart.getTime();
       });
 
       for (const event of allEvents) {
-        const eventDate = new Date(event.start).toISOString().split("T")[0];
+        // Use local date to prevent timezone-related day shift issues
+        const eventDate = getLocalDateString(new Date(event.start));
         if (!eventsByDate[eventDate]) {
           eventsByDate[eventDate] = [];
         }

extensions/agenda/src/hooks/useCalendarData.ts

@@ -0,0 +1,10 @@
+import { getPreferenceValues } from "@vicinae/api";
+import { Preferences } from "../types";
+
+export function usePreferences() {
+  const preferences = getPreferenceValues<Preferences>();
+  return {
+    refreshInterval: parseInt(preferences.refreshInterval) || 15,
+    use24Hour: preferences.timeFormat === "24h",
+  };
+}

extensions/agenda/src/hooks/usePreferences.ts

@@ -5,3 +5,8 @@ export interface Calendar {
   name: string;
   color: Color;
 }
+
+export interface Preferences {
+  refreshInterval: string;
+  timeFormat: "12h" | "24h";
+}

extensions/agenda/src/types.ts

@@ -1,11 +1,10 @@
-import { getPreferenceValues } from "@vicinae/api";
 import { useCalendarData } from "./hooks/useCalendarData";
 import { useCalendarFilter } from "./hooks/useCalendarFilter";
+import { usePreferences } from "./hooks/usePreferences";
 import { UpcomingEvents } from "./components/UpcomingEvents";
 
 export default function Command() {
-  const preferences = getPreferenceValues();
-  const refreshInterval = parseInt(preferences.refreshInterval) || 15;
+  const { refreshInterval } = usePreferences();
 
   const {
     calendars,

extensions/agenda/src/upcoming-events.tsx

@@ -30,14 +30,23 @@ export const getCalendarName = (calendar: Calendar): string => {
   }
 };
 
+/**
+ * Parse YYYY-MM-DD string as local date components to avoid timezone shifts
+ */
+const parseDateString = (dateString: string): Date => {
+  const [year, month, day] = dateString.split("-").map(Number);
+  return new Date(year, month - 1, day);
+};
+
 export const formatDate = (dateString: string) => {
-  const date = new Date(dateString);
+  const date = parseDateString(dateString);
   const today = new Date();
+  today.setHours(0, 0, 0, 0);
   const tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000);
 
-  if (date.toDateString() === today.toDateString()) {
+  if (date.getTime() === today.getTime()) {
     return "Today";
-  } else if (date.toDateString() === tomorrow.toDateString()) {
+  } else if (date.getTime() === tomorrow.getTime()) {
     return "Tomorrow";
   } else {
     return date.toLocaleDateString("en-US", {

extensions/agenda/src/utils/calendar.ts

@@ -10,25 +10,47 @@ export const isAllDayEvent = (start: Date, end: Date): boolean => {
   );
 };
 
-export const getDisplayStart = (start: Date, isAllDay: boolean): string => {
+/**
+ * Display time using UTC timezone because node-ical/rrule stores
+ * local time values in the UTC position internally
+ */
+export const getDisplayStart = (
+  start: Date,
+  isAllDay: boolean,
+  use24Hour: boolean = false
+): string => {
   return isAllDay
     ? ""
     : start.toLocaleTimeString("en-US", {
         hour: "2-digit",
         minute: "2-digit",
-        hour12: false,
+        hour12: !use24Hour,
+        timeZone: "UTC",
       });
 };
 
 export const getDisplayEnd = (
   end: Date,
   isAllDay: boolean,
+  use24Hour: boolean = false
 ): string | undefined => {
   return isAllDay
     ? undefined
     : end.toLocaleTimeString("en-US", {
         hour: "2-digit",
         minute: "2-digit",
-        hour12: false,
+        hour12: !use24Hour,
+        timeZone: "UTC",
       });
-};
+};
+
+/**
+ * Get the date string for an event (YYYY-MM-DD format)
+ * Uses UTC because node-ical stores local time values as UTC internally
+ */
+export const getLocalDateString = (date: Date): string => {
+  const year = date.getUTCFullYear();
+  const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const day = String(date.getUTCDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};