fix(calendar): respect configured timezone

templates/calendar/actions/get-settings.ts

@@ -3,24 +3,20 @@ import { getRequestUserEmail } from "@agent-native/core/server";
 import { getUserSetting } from "@agent-native/core/settings";
 import { z } from "zod";
 
+import { getDefaultSettings } from "../server/lib/calendar-settings.js";
 import type { Settings } from "../shared/api.js";
 
-const DEFAULT_SETTINGS: Settings = {
-  timezone: "America/New_York",
-  bookingPageTitle: "Book a Meeting",
-  bookingPageDescription: "Select a time that works for you.",
-  defaultEventDuration: 30,
-};
-
 export default defineAction({
   description: "Get calendar settings",
   schema: z.object({}),
   http: { method: "GET" },
   run: async () => {
     const email = getRequestUserEmail();
     if (!email) throw new Error("no authenticated user");
-    const settings =
-      (await getUserSetting(email, "calendar-settings")) || DEFAULT_SETTINGS;
-    return settings;
+    const settings = (await getUserSetting(
+      email,
+      "calendar-settings",
+    )) as Settings | null;
+    return settings || getDefaultSettings();
   },
 });

templates/calendar/actions/list-events.ts

@@ -13,6 +13,7 @@ import { and, gte, inArray, lte, ne } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import { getCalendarTimezone } from "../server/lib/calendar-settings.js";
 import * as googleCalendar from "../server/lib/google-calendar.js";
 import { fetchICalEvents } from "../server/lib/ical-fetcher.js";
 import type { CalendarEvent, ExternalCalendar } from "../shared/api.js";
@@ -578,11 +579,13 @@ export async function listCalendarEvents(
 ): Promise<CalendarEventsResult> {
   const email = getRequestUserEmail();
   if (!email) throw new Error("no authenticated user");
+  const timezone = await getCalendarTimezone(email);
   const range =
     options.range ??
     resolveCalendarEventRange({
       from: args.from,
       to: args.to,
+      timezone,
     });
 
   const sources = resolveInventorySources(args.sources);

templates/calendar/actions/update-settings.ts

@@ -3,12 +3,20 @@ import { getRequestUserEmail } from "@agent-native/core/server";
 import { putUserSetting, putSetting } from "@agent-native/core/settings";
 import { z } from "zod";
 
+import { isCalendarTimezone } from "../server/lib/calendar-settings.js";
 import type { Settings } from "../shared/api.js";
 
 export default defineAction({
   description: "Update calendar settings",
   schema: z.object({
-    timezone: z.string().optional().describe("Timezone"),
+    timezone: z
+      .string()
+      .trim()
+      .refine(isCalendarTimezone, {
+        message: "Timezone must be a valid IANA timezone.",
+      })
+      .optional()
+      .describe("IANA timezone, e.g. Europe/Warsaw"),
     bookingPageTitle: z.string().optional().describe("Booking page title"),
     bookingPageDescription: z
       .string()

templates/calendar/actions/view-screen.ts

@@ -2,10 +2,13 @@ import { defineAction } from "@agent-native/core";
 import { readAppState } from "@agent-native/core/application-state";
 import { getRequestUserEmail } from "@agent-native/core/server";
 import { accessFilter } from "@agent-native/core/sharing";
+import { addDays, parseISO, startOfWeek } from "date-fns";
+import { fromZonedTime, toZonedTime } from "date-fns-tz";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
 import { rowToBookingLink } from "../server/lib/booking-link-utils.js";
+import { getCalendarTimezone } from "../server/lib/calendar-settings.js";
 import type { CalendarEvent, CalendarEventDraft } from "../shared/api.js";
 import {
   CALENDAR_VIEW_PREFERENCES_KEY,
@@ -67,18 +70,18 @@ export default defineAction({
     const nav = navigation as any;
 
     if (nav?.view === "calendar" || !nav?.view) {
-      const now = new Date();
-      const viewDate = nav?.date ? new Date(nav.date) : now;
-
-      const from = new Date(viewDate);
-      from.setDate(from.getDate() - from.getDay());
-      from.setHours(0, 0, 0, 0);
-      const to = new Date(from);
-      to.setDate(to.getDate() + 7);
+      const email = getRequestUserEmail();
+      if (!email) throw new Error("no authenticated user");
+      const timezone = await getCalendarTimezone(email);
+      const viewDate = nav?.date
+        ? parseISO(nav.date)
+        : toZonedTime(new Date(), timezone);
+      const from = startOfWeek(viewDate);
+      const to = addDays(from, 7);
 
       const eventResult = await fetchEventsForRange(
-        from.toISOString(),
-        to.toISOString(),
+        fromZonedTime(from, timezone).toISOString(),
+        fromZonedTime(to, timezone).toISOString(),
       );
       const { events } = eventResult;
 

templates/calendar/app/components/calendar/CommandPalette.tsx

@@ -13,6 +13,7 @@ import {
 } from "@tabler/icons-react";
 import * as chrono from "chrono-node";
 import { format, parseISO, parse, isValid } from "date-fns";
+import { toZonedTime } from "date-fns-tz";
 
 import { cn } from "@/lib/utils";
 
@@ -28,6 +29,7 @@ interface CommandPaletteProps {
   open: boolean;
   onClose: () => void;
   events: CalendarEvent[];
+  timezone?: string;
   onGoToDate: (date: Date) => void;
   onEventClick: (event: CalendarEvent) => void;
   onCreateEvent: () => void;
@@ -80,6 +82,7 @@ export function CommandPalette({
   open,
   onClose,
   events,
+  timezone,
   onGoToDate,
   onEventClick,
   onCreateEvent,
@@ -192,7 +195,12 @@ export function CommandPalette({
                 />
                 <span className="flex-1 truncate">{event.title}</span>
                 <span className="ml-2 text-xs text-muted-foreground">
-                  {format(parseISO(event.start), "MMM d")}
+                  {format(
+                    event.allDay || !timezone
+                      ? parseISO(event.start)
+                      : toZonedTime(event.start, timezone),
+                    "MMM d",
+                  )}
                 </span>
               </CommandMenu.Item>
             ))}

templates/calendar/app/components/calendar/DayView.tsx

@@ -14,6 +14,7 @@ import {
   addDays,
   min,
 } from "date-fns";
+import { toZonedTime } from "date-fns-tz";
 import { useState, useEffect, useRef, useMemo, useCallback, memo } from "react";
 
 import { useCalendarSetters } from "@/components/layout/AppLayout";
@@ -49,6 +50,7 @@ import { OutOfOfficeEvent } from "./OutOfOfficeEvent";
 
 interface DayViewProps {
   events: CalendarEvent[];
+  timezone: string;
   date: Date;
   onDeleteEvent: (eventId: string) => void;
   onEventTimeChange?: (eventId: string, newStart: Date, newEnd: Date) => void;
@@ -182,9 +184,13 @@ function computeLayout(dayEvents: CalendarEvent[]): Map<string, LayoutInfo> {
   return result;
 }
 
-function getEventStyleForDate(event: CalendarEvent, date: Date) {
-  const start = parseISO(event.start);
-  const end = parseISO(event.end);
+function getEventStyleForDate(
+  event: CalendarEvent,
+  date: Date,
+  timezone: string,
+) {
+  const start = toZonedTime(event.start, timezone);
+  const end = toZonedTime(event.end, timezone);
   const dayStart = set(startOfDay(date), { hours: START_HOUR });
   const dayEnd = addDays(startOfDay(date), 1);
   const cappedEnd = min([end, dayEnd]);
@@ -202,6 +208,7 @@ function getEventStyleForDate(event: CalendarEvent, date: Date) {
 
 interface DayEventCardProps {
   event: CalendarEvent;
+  timezone: string;
   date: Date;
   layout: Map<string, LayoutInfo>;
   now: Date;
@@ -243,6 +250,7 @@ interface DayEventCardProps {
  */
 const DayEventCard = memo(function DayEventCard({
   event,
+  timezone,
   date,
   layout,
   now,
@@ -284,7 +292,7 @@ const DayEventCard = memo(function DayEventCard({
         top: `${overrides.top}px`,
         height: `${overrides.height}px`,
       }
-    : getEventStyleForDate(event, date);
+    : getEventStyleForDate(event, date, timezone);
   const color = getEventDisplayColor(event, prefs);
   const evStart = parseISO(event.start);
   const rawEnd = parseISO(event.end);
@@ -529,6 +537,7 @@ const DayCreateGhost = memo(function DayCreateGhost({
 
 export const DayView = memo(function DayView({
   events,
+  timezone,
   date,
   onDeleteEvent,
   onEventTimeChange,
@@ -618,7 +627,10 @@ export const DayView = memo(function DayView({
     function nameForToken(token: "shortGeneric" | "longGeneric" | "short") {
       try {
         return (
-          new Intl.DateTimeFormat("en-US", { timeZoneName: token })
+          new Intl.DateTimeFormat("en-US", {
+            timeZone: timezone,
+            timeZoneName: token,
+          })
             .formatToParts(now)
             .find((p) => p.type === "timeZoneName")?.value ?? ""
         );
@@ -629,7 +641,7 @@ export const DayView = memo(function DayView({
 
     let iana = "";
     try {
-      iana = Intl.DateTimeFormat().resolvedOptions().timeZone ?? "";
+      iana = timezone;
     } catch {}
 
     const longGeneric = nameForToken("longGeneric");
@@ -648,10 +660,12 @@ export const DayView = memo(function DayView({
       tzLong: longGeneric || iana,
       tzIana: iana,
     };
-  }, []);
+  }, [now, timezone]);
 
+  const calendarNow = toZonedTime(now, timezone);
   const today = isToday(date);
-  const nowMinutes = (now.getHours() - START_HOUR) * 60 + now.getMinutes();
+  const nowMinutes =
+    (calendarNow.getHours() - START_HOUR) * 60 + calendarNow.getMinutes();
   const nowTop = (nowMinutes / 60) * HOUR_HEIGHT;
   const showNowIndicator =
     today && nowMinutes >= 0 && nowMinutes <= (END_HOUR - START_HOUR) * 60;
@@ -676,6 +690,7 @@ export const DayView = memo(function DayView({
     scrollContainerRef,
     onEventTimeChange: handleEventTimeChange,
     events,
+    timezone,
   });
 
   const canDrag = !!onEventTimeChange;
@@ -1109,6 +1124,7 @@ export const DayView = memo(function DayView({
                 <DayEventCard
                   key={event._tempId ?? event.id}
                   event={event}
+                  timezone={timezone}
                   date={date}
                   layout={layout}
                   now={now}

templates/calendar/app/components/calendar/EventCard.tsx

@@ -1,6 +1,7 @@
 import { useT } from "@agent-native/core/client/i18n";
 import type { CalendarEvent } from "@shared/api";
 import { IconAlertTriangleFilled, IconCalendarOff } from "@tabler/icons-react";
+import { formatInTimeZone } from "date-fns-tz";
 
 import {
   getEventDisplayColor,
@@ -26,6 +27,7 @@ interface EventCardProps {
   onDragEnd?: () => void;
   dimmed?: boolean;
   colorPreferences?: CalendarColorPreferences;
+  timezone?: string;
 }
 
 export function EventCard({
@@ -37,6 +39,7 @@ export function EventCard({
   onDragEnd,
   dimmed = false,
   colorPreferences,
+  timezone,
 }: EventCardProps) {
   const t = useT();
   const workingLocationLabels = createWorkingLocationDisplayLabels(t);
@@ -164,10 +167,12 @@ export function EventCard({
       )}
       {!event.allDay && (
         <span className="text-foreground/70">
-          {new Date(event.start).toLocaleTimeString([], {
-            hour: "numeric",
-            minute: "2-digit",
-          })}
+          {timezone
+            ? formatInTimeZone(event.start, timezone, "h:mm a")
+            : new Date(event.start).toLocaleTimeString([], {
+                hour: "numeric",
+                minute: "2-digit",
+              })}
         </span>
       )}
       {event.ownerColor && (