@agent-native/core 0.154.4 → 0.155.0

package/corpus/templates/calendar/actions/update-settings.ts

@@ -1,9 +1,13 @@
 import { defineAction } from "@agent-native/core";
 import { getRequestUserEmail } from "@agent-native/core/server";
-import { putUserSetting, putSetting } from "@agent-native/core/settings";
+import {
+  getUserSetting,
+  putUserSetting,
+  putSetting,
+} from "@agent-native/core/settings";
 import { z } from "zod";
 
-import type { Settings } from "../shared/api.js";
+import { normalizeCalendarSettings } from "../shared/settings.js";
 
 export default defineAction({
   description: "Update calendar settings",
@@ -20,12 +24,19 @@ export default defineAction({
       .positive()
       .optional()
       .describe("Default event duration in minutes"),
+    weekStart: z
+      .enum(["sunday", "monday"])
+      .optional()
+      .describe("First day shown in calendar weeks"),
   }),
   run: async (args) => {
     const email = getRequestUserEmail();
     if (!email) throw new Error("no authenticated user");
-    // The frontend sends the full settings object as the body
-    const settings = args as unknown as Settings;
+    const currentSettings = await getUserSetting(email, "calendar-settings");
+    const settings = normalizeCalendarSettings({
+      ...normalizeCalendarSettings(currentSettings),
+      ...args,
+    });
     const settingsRecord = settings as unknown as Record<string, unknown>;
     await putUserSetting(email, "calendar-settings", settingsRecord);
     await putSetting("calendar-settings", settingsRecord);

package/corpus/templates/calendar/app/components/booking/DatePicker.tsx

@@ -1,4 +1,5 @@
 import type { AvailabilityConfig } from "@shared/api";
+import { getWeekdayOrder } from "@shared/calendar-week";
 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import {
   startOfMonth,
@@ -31,6 +32,7 @@ interface DatePickerProps {
   availabilityLoading?: boolean;
   viewMonth: Date;
   onViewMonthChange: (month: Date) => void;
+  weekStartsOn?: 0 | 1;
 }
 
 const WEEKDAY_HEADERS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
@@ -53,12 +55,16 @@ export function DatePicker({
   availabilityLoading = false,
   viewMonth,
   onViewMonthChange,
+  weekStartsOn = 0,
 }: DatePickerProps) {
   const monthStart = startOfMonth(viewMonth);
   const monthEnd = endOfMonth(viewMonth);
-  const calendarStart = startOfWeek(monthStart);
-  const calendarEnd = endOfWeek(monthEnd);
+  const calendarStart = startOfWeek(monthStart, { weekStartsOn });
+  const calendarEnd = endOfWeek(monthEnd, { weekStartsOn });
   const days = eachDayOfInterval({ start: calendarStart, end: calendarEnd });
+  const weekdayHeaders = getWeekdayOrder(weekStartsOn).map(
+    (day) => WEEKDAY_HEADERS[day],
+  );
   const availableDateSet = useMemo(
     () => new Set(availableDates),
     [availableDates],
@@ -103,7 +109,7 @@ export function DatePicker({
 
       {/* Weekday headers */}
       <div className="grid grid-cols-7 mb-1">
-        {WEEKDAY_HEADERS.map((d) => (
+        {weekdayHeaders.map((d) => (
           <div
             key={d}
             className="py-1 text-center text-xs font-medium text-muted-foreground"

package/corpus/templates/calendar/app/components/calendar/CreateEventDialog.tsx

@@ -76,8 +76,8 @@ import {
   createReminderDraft,
   dateTimeInTimezoneToIso,
   getEventEndValidationMessage,
-  getLocalTimezone,
   remindersToDraftState,
+  resolveEventTimezone,
   type AttachmentDraft,
   type ReminderDraft,
   type ReminderMode,
@@ -236,7 +236,7 @@ export function CreateEventPopover({
   const defaultDurationMinutes = Number.isFinite(rawDefaultDuration)
     ? Math.max(5, rawDefaultDuration)
     : 30;
-  const defaultTimezone = settings?.timezone || getLocalTimezone();
+  const defaultTimezone = settings?.timezone || resolveEventTimezone();
   const fallbackStart = "09:00";
   const fallbackEnd = addMinutesToTimeString(
     fallbackStart,
@@ -279,6 +279,7 @@ export function CreateEventPopover({
   const [findTimeOpen, setFindTimeOpen] = useState(false);
   const isOutOfOffice = eventType === "outOfOffice";
   const timedOnlyStatus = eventType === "focusTime";
+  const eventTimezone = resolveEventTimezone(timezone);
 
   const createEvent = useCreateEvent();
   const delEvent = useDeleteEvent();
@@ -308,8 +309,9 @@ export function CreateEventPopover({
     }
 
     const nextDate = format(defaultDate || new Date(), "yyyy-MM-dd");
-    const draftTimezone =
-      draft?.startTimeZone || draft?.endTimeZone || defaultTimezone;
+    const draftTimezone = resolveEventTimezone(
+      draft?.startTimeZone || draft?.endTimeZone || defaultTimezone,
+    );
     const initKey = buildEventFormInitializationKey({
       draftId: draft?.id,
       date: nextDate,
@@ -455,12 +457,12 @@ export function CreateEventPopover({
       ? date
       : effectiveAllDay
         ? new Date(`${date}T00:00:00`).toISOString()
-        : dateTimeInTimezoneToIso(date, startTime, timezone);
+        : dateTimeInTimezoneToIso(date, startTime, eventTimezone);
     const endValue = fullDayOutOfOffice
       ? endDate
       : effectiveAllDay
         ? allDayEnd.toISOString()
-        : dateTimeInTimezoneToIso(endDate, endTime, timezone);
+        : dateTimeInTimezoneToIso(endDate, endTime, eventTimezone);
     const attachmentResult = validateAttachmentDrafts(attachments);
     const reminderPatch = buildReminderPayload(reminderMode, reminders);
     const nextDraft: CalendarEventDraft = {
@@ -470,8 +472,8 @@ export function CreateEventPopover({
       description: isOutOfOffice ? "" : description,
       start: startValue,
       end: endValue,
-      startTimeZone: effectiveAllDay ? undefined : timezone,
-      endTimeZone: effectiveAllDay ? undefined : timezone,
+      startTimeZone: effectiveAllDay ? undefined : eventTimezone,
+      endTimeZone: effectiveAllDay ? undefined : eventTimezone,
       location: isOutOfOffice ? "" : location,
       allDay: effectiveAllDay,
       fullDay: fullDayOutOfOffice,
@@ -547,7 +549,7 @@ export function CreateEventPopover({
     declineMessage,
     availability,
     visibility,
-    timezone,
+    eventTimezone,
     colorId,
     reminderMode,
     reminders,
@@ -578,7 +580,7 @@ export function CreateEventPopover({
         time: allDay
           ? t("eventForm.allDay")
           : t("eventForm.ai.timeRange", { startTime, endTime }),
-        timezone,
+        timezone: eventTimezone,
         location: location || t("eventForm.ai.none"),
         attendees:
           attendees.map((attendee) => attendee.email).join(", ") ||
@@ -636,11 +638,11 @@ export function CreateEventPopover({
   const effectiveAllDay = allDay && !isOutOfOffice && !timedOnlyStatus;
   const currentStartISO =
     !effectiveAllDay && date && startTime
-      ? dateTimeInTimezoneToIso(date, startTime, timezone)
+      ? dateTimeInTimezoneToIso(date, startTime, eventTimezone)
       : undefined;
   const currentEndISO =
     !effectiveAllDay && endDate && endTime
-      ? dateTimeInTimezoneToIso(endDate, endTime, timezone)
+      ? dateTimeInTimezoneToIso(endDate, endTime, eventTimezone)
       : undefined;
   const findTimeDurationMinutes =
     currentStartISO && currentEndISO
@@ -654,8 +656,8 @@ export function CreateEventPopover({
       : defaultDurationMinutes;
 
   function handleSelectFindTimeSlot(slot: { start: string; end: string }) {
-    const startParts = dateTimePartsInTimezone(slot.start, timezone);
-    const endParts = dateTimePartsInTimezone(slot.end, timezone);
+    const startParts = dateTimePartsInTimezone(slot.start, eventTimezone);
+    const endParts = dateTimePartsInTimezone(slot.end, eventTimezone);
     if (!startParts || !endParts) return;
     setAllDay(false);
     setDate(startParts.date);
@@ -708,12 +710,12 @@ export function CreateEventPopover({
       ? date
       : effectiveAllDay
         ? new Date(`${date}T00:00:00`).toISOString()
-        : dateTimeInTimezoneToIso(date, startTime, timezone);
+        : dateTimeInTimezoneToIso(date, startTime, eventTimezone);
     const endValue = fullDayOutOfOffice
       ? endDate
       : effectiveAllDay
         ? allDayEnd.toISOString()
-        : dateTimeInTimezoneToIso(endDate, endTime, timezone);
+        : dateTimeInTimezoneToIso(endDate, endTime, eventTimezone);
 
     if (
       fullDayOutOfOffice
@@ -761,8 +763,8 @@ export function CreateEventPopover({
       description: isOutOfOffice ? "" : description,
       start: startValue,
       end: endValue,
-      startTimeZone: effectiveAllDay ? undefined : timezone,
-      endTimeZone: effectiveAllDay ? undefined : timezone,
+      startTimeZone: effectiveAllDay ? undefined : eventTimezone,
+      endTimeZone: effectiveAllDay ? undefined : eventTimezone,
       location: isOutOfOffice ? "" : location,
       accountEmail,
       allDay: effectiveAllDay,
@@ -1459,7 +1461,7 @@ export function CreateEventPopover({
               (draft ? t("eventForm.invite") : t("eventForm.newEventLower"))
             }
             date={date}
-            timezone={timezone}
+            timezone={eventTimezone}
             durationMinutes={findTimeDurationMinutes}
             attendees={attendees}
             accountEmail={accountEmail}

package/corpus/templates/calendar/app/components/calendar/EventDetailPopover.tsx

@@ -1441,7 +1441,7 @@ export function EventDetailPopover({
         side={isMobile ? "bottom" : "right"}
         sideOffset={isMobile ? 6 : 8}
         collisionPadding={12}
-        className="flex max-h-[90vh] w-[calc(100vw-2rem)] flex-col overflow-hidden p-0 sm:w-[420px]"
+        className="flex max-h-[var(--radix-popover-content-available-height)] w-[min(420px,calc(100vw-2rem))] flex-col overflow-hidden p-0"
         onClick={(e) => e.stopPropagation()}
         onOpenAutoFocus={(e) => {
           e.preventDefault();
@@ -1671,12 +1671,15 @@ export function EventDetailPopover({
                             />
                           </>
                         )}
+                        <span className="ml-auto">
+                          <TimezonePickerPopover
+                            compact
+                            value={editTimezone}
+                            label={t("eventForm.timezone")}
+                            onChange={handleInlineTimezoneChange}
+                          />
+                        </span>
                       </div>
-                      <TimezonePickerPopover
-                        value={editTimezone}
-                        label={t("eventForm.timezone")}
-                        onChange={handleInlineTimezoneChange}
-                      />
                     </>
                   )}
                 </div>

package/corpus/templates/calendar/app/components/calendar/FindTimePanel.tsx

@@ -5,12 +5,14 @@ import type {
   FindTimeResult,
   FindTimeSlot,
 } from "@shared/api";
+import { getWeekStartsOn } from "@shared/calendar-week";
 import {
   IconAlertCircle,
   IconCalendarTime,
   IconChevronLeft,
   IconChevronRight,
   IconLoader2,
+  IconX,
   IconUsers,
 } from "@tabler/icons-react";
 import {
@@ -31,11 +33,13 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useSettings } from "@/hooks/use-settings";
 import { dateTimeInTimezoneToIso } from "@/lib/event-form-utils";
 import { cn } from "@/lib/utils";
 
@@ -188,6 +192,8 @@ export function FindTimePanel({
   isTakeover = false,
 }: FindTimePanelProps) {
   const t = useT();
+  const { data: settings } = useSettings();
+  const weekStartsOn = getWeekStartsOn(settings?.weekStart);
   const [anchorDate, setAnchorDate] = useState(() => parseDateOnly(date));
 
   useEffect(() => {
@@ -220,7 +226,10 @@ export function FindTimePanel({
     return () => window.removeEventListener("keydown", handleKeyDown, true);
   }, [isTakeover]);
 
-  const weekStart = useMemo(() => startOfWeek(anchorDate), [anchorDate]);
+  const weekStart = useMemo(
+    () => startOfWeek(anchorDate, { weekStartsOn }),
+    [anchorDate, weekStartsOn],
+  );
   const days = useMemo(
     () =>
       eachDayOfInterval({
@@ -663,9 +672,11 @@ export function FindTimeTakeover({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
         data-find-time-takeover
-        className="flex h-[100dvh] max-h-[100dvh] w-screen max-w-none translate-x-[-50%] translate-y-[-50%] flex-col gap-0 overflow-hidden border-0 p-0 shadow-xl sm:rounded-none"
+        hideClose
+        overlayClassName="z-[310]"
+        className="z-[320] flex h-[100dvh] max-h-[100dvh] w-screen max-w-none translate-x-[-50%] translate-y-[-50%] flex-col gap-0 overflow-hidden border-0 p-0 shadow-xl sm:rounded-none"
       >
-        <header className="flex h-14 shrink-0 items-center border-b border-border px-4 pr-12 md:px-6">
+        <header className="flex h-14 shrink-0 items-center border-b border-border px-4 md:px-6">
           <div className="min-w-0">
             <DialogTitle className="truncate text-base">
               {dialogTitle}
@@ -679,6 +690,17 @@ export function FindTimeTakeover({
               {subtitle || t("findTime.takeoverDescription")}
             </DialogDescription>
           </div>
+          <DialogClose asChild>
+            <button
+              type="button"
+              aria-label={t("eventDialog.close")}
+              title={t("eventDialog.close")}
+              className="ml-auto flex h-10 shrink-0 items-center gap-2 rounded-md px-3 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            >
+              <IconX className="h-4 w-4" />
+              <span>{t("eventDialog.close")}</span>
+            </button>
+          </DialogClose>
         </header>
         <div className="min-h-0 flex-1 overflow-auto p-4 md:p-6">
           <FindTimePanel

package/corpus/templates/calendar/app/components/calendar/InlineEventPickers.tsx

@@ -193,10 +193,12 @@ export function TimezonePickerPopover({
   value,
   onChange,
   label,
+  compact = false,
 }: {
   value: string;
   onChange: (value: string) => void;
   label: string;
+  compact?: boolean;
 }) {
   const t = useT();
   const [open, setOpen] = useState(false);
@@ -208,11 +210,16 @@ export function TimezonePickerPopover({
           type="button"
           variant="ghost"
           size="sm"
-          className="h-auto justify-start rounded px-1.5 py-0.5 text-sm font-normal text-muted-foreground hover:bg-muted hover:text-foreground"
+          className={cn(
+            compact
+              ? "size-7 rounded-full p-0 text-muted-foreground hover:bg-muted hover:text-foreground"
+              : "h-auto justify-start rounded px-1.5 py-0.5 text-sm font-normal text-muted-foreground hover:bg-muted hover:text-foreground",
+          )}
           aria-label={label}
+          title={compact ? label : undefined}
         >
-          <IconWorld className="mr-2 size-4 shrink-0" />
-          {formatTimezoneLabel(value)}
+          <IconWorld className={cn("size-4 shrink-0", !compact && "mr-2")} />
+          {!compact && formatTimezoneLabel(value)}
         </Button>
       </PopoverTrigger>
       <PopoverContent

package/corpus/templates/calendar/app/components/calendar/MonthView.tsx

@@ -1,4 +1,5 @@
 import type { CalendarEvent } from "@shared/api";
+import { getWeekdayOrder } from "@shared/calendar-week";
 import {
   startOfMonth,
   endOfMonth,
@@ -49,6 +50,7 @@ interface MonthViewProps {
   ) => void;
   onDraftDiscard?: (eventId: string) => void;
   isLoading?: boolean;
+  weekStartsOn?: 0 | 1;
 }
 
 // Skeleton pill widths per day-of-week (Sun–Sat), empty = no skeletons
@@ -85,6 +87,7 @@ export const MonthView = memo(function MonthView({
   onDraftCreate,
   onDraftDiscard,
   isLoading = false,
+  weekStartsOn = 0,
 }: MonthViewProps) {
   const isMobile = useIsMobile();
   const { prefs } = useViewPreferences();
@@ -93,8 +96,8 @@ export const MonthView = memo(function MonthView({
 
   const monthStart = startOfMonth(selectedDate);
   const monthEnd = endOfMonth(selectedDate);
-  const calendarStart = startOfWeek(monthStart);
-  const calendarEnd = endOfWeek(monthEnd);
+  const calendarStart = startOfWeek(monthStart, { weekStartsOn });
+  const calendarEnd = endOfWeek(monthEnd, { weekStartsOn });
   const allDays = eachDayOfInterval({
     start: calendarStart,
     end: calendarEnd,
@@ -103,13 +106,10 @@ export const MonthView = memo(function MonthView({
     ? allDays.filter((d) => d.getDay() !== 0 && d.getDay() !== 6)
     : allDays;
   const colCount = prefs.hideWeekends ? 5 : 7;
-  const headers = prefs.hideWeekends
-    ? (isMobile ? WEEKDAY_HEADERS_SHORT : WEEKDAY_HEADERS).filter(
-        (_, i) => i !== 0 && i !== 6,
-      )
-    : isMobile
-      ? WEEKDAY_HEADERS_SHORT
-      : WEEKDAY_HEADERS;
+  const headerLabels = isMobile ? WEEKDAY_HEADERS_SHORT : WEEKDAY_HEADERS;
+  const headers = getWeekdayOrder(weekStartsOn)
+    .filter((day) => !prefs.hideWeekends || (day !== 0 && day !== 6))
+    .map((day) => headerLabels[day]);
 
   // Pre-group events by every day they overlap (not just their start day) so
   // multi-day events keep appearing as the grid moves past their start date.

package/corpus/templates/calendar/app/components/calendar/WeekView.tsx

@@ -107,6 +107,7 @@ interface WeekViewProps {
   ) => void;
   onDraftDiscard?: (eventId: string) => void;
   isLoading?: boolean;
+  weekStartsOn?: 0 | 1;
 }
 
 // [startHour, startMin, durationMin, widthPct] per day column (Sun–Sat)
@@ -559,6 +560,7 @@ export const WeekView = memo(function WeekView({
   onDraftCreate,
   onDraftDiscard,
   isLoading = false,
+  weekStartsOn = 0,
 }: WeekViewProps) {
   const t = useT();
   const workingLocationLabels = useMemo(
@@ -606,8 +608,14 @@ export const WeekView = memo(function WeekView({
   }, []);
 
   const { prefs } = useViewPreferences();
-  const weekStart = useMemo(() => startOfWeek(selectedDate), [selectedDate]);
-  const weekEnd = useMemo(() => endOfWeek(selectedDate), [selectedDate]);
+  const weekStart = useMemo(
+    () => startOfWeek(selectedDate, { weekStartsOn }),
+    [selectedDate, weekStartsOn],
+  );
+  const weekEnd = useMemo(
+    () => endOfWeek(selectedDate, { weekStartsOn }),
+    [selectedDate, weekStartsOn],
+  );
   // Stable day/hour arrays — recomputed only when the week or weekend
   // visibility actually changes, so memoized children (event buttons) don't
   // see a new array identity on every drag/focus re-render.
@@ -1408,7 +1416,7 @@ export const WeekView = memo(function WeekView({
 
                 {/* Skeleton events when loading */}
                 {isLoading &&
-                  WEEK_SKELETONS[dayIndex]?.map(
+                  WEEK_SKELETONS[day.getDay()]?.map(
                     ([startHour, startMin, duration, widthPct], i) => {
                       const topPx =
                         ((startHour - START_HOUR) * 60 + startMin) *

package/corpus/templates/calendar/app/components/layout/Sidebar.tsx

@@ -5,6 +5,7 @@ import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import { FeedbackButton } from "@agent-native/core/client/ui";
 import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
+import { getWeekdayOrder, getWeekStartsOn } from "@shared/calendar-week";
 import {
   IconCalendar,
   IconSettings,
@@ -77,6 +78,7 @@ import {
   useRemoveOverlayPerson,
   useUpdateOverlayPersonColor,
 } from "@/hooks/use-overlay-people";
+import { useSettings } from "@/hooks/use-settings";
 import { useViewPreferences } from "@/hooks/use-view-preferences";
 import {
   CALENDAR_COLORS,
@@ -200,6 +202,8 @@ function MiniCalendar({
 }) {
   const [viewMonth, setViewMonth] = useState(() => startOfMonth(selectedDate));
   const [pickerOpen, setPickerOpen] = useState(false);
+  const { data: settings } = useSettings();
+  const weekStartsOn = getWeekStartsOn(settings?.weekStart);
 
   // Sync viewMonth when selectedDate changes to a different month
   useEffect(() => {
@@ -211,8 +215,8 @@ function MiniCalendar({
   const days = useMemo(() => {
     const monthStart = startOfMonth(viewMonth);
     const monthEnd = endOfMonth(viewMonth);
-    const calStart = startOfWeek(monthStart);
-    const calEnd = endOfWeek(monthEnd);
+    const calStart = startOfWeek(monthStart, { weekStartsOn });
+    const calEnd = endOfWeek(monthEnd, { weekStartsOn });
 
     const result: Date[] = [];
     let current = calStart;
@@ -221,9 +225,11 @@ function MiniCalendar({
       current = addDays(current, 1);
     }
     return result;
-  }, [viewMonth]);
+  }, [viewMonth, weekStartsOn]);
 
-  const weekdays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+  const weekdays = getWeekdayOrder(weekStartsOn).map(
+    (day) => ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"][day],
+  );
 
   return (
     <div className="px-3 py-3">

package/corpus/templates/calendar/app/i18n-data.ts

@@ -265,6 +265,9 @@ const enUS = {
     defaultDurationLabel: "Default event duration (minutes)",
     defaultDurationHelp:
       "Default length for new calendar events and booking slots. Booking links can override this per link.",
+    weekStartLabel: "Week starts on",
+    weekStartSunday: "Sunday - Saturday",
+    weekStartMonday: "Monday - Sunday",
   },
   eventDialog: {
     eventUpdated: "Event updated",
@@ -4303,6 +4306,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "默认事件时长（分钟）",
       defaultDurationHelp:
         "新日历事件和预约时段的默认长度。预约链接可按链接覆盖此设置。",
+      weekStartLabel: "每周从哪天开始",
+      weekStartSunday: "周日 - 周六",
+      weekStartMonday: "周一 - 周日",
     },
     eventDialog: {
       eventUpdated: "事件已更新",
@@ -4372,6 +4378,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "Duración predeterminada del evento (minutos)",
       defaultDurationHelp:
         "Duración predeterminada para eventos nuevos y franjas de reserva. Cada enlace de reserva puede anularla.",
+      weekStartLabel: "La semana empieza el",
+      weekStartSunday: "Domingo - sábado",
+      weekStartMonday: "Lunes - domingo",
     },
     eventDialog: {
       eventUpdated: "Evento actualizado",
@@ -4442,6 +4451,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "Durée d'événement par défaut (minutes)",
       defaultDurationHelp:
         "Durée par défaut des nouveaux événements et créneaux de réservation. Chaque lien de réservation peut la remplacer.",
+      weekStartLabel: "La semaine commence le",
+      weekStartSunday: "Dimanche - samedi",
+      weekStartMonday: "Lundi - dimanche",
     },
     eventDialog: {
       eventUpdated: "Événement mis à jour",
@@ -4512,6 +4524,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "Standarddauer für Ereignisse (Minuten)",
       defaultDurationHelp:
         "Standardlänge für neue Kalenderereignisse und Buchungsslots. Buchungslinks können sie pro Link überschreiben.",
+      weekStartLabel: "Wochenbeginn",
+      weekStartSunday: "Sonntag - Samstag",
+      weekStartMonday: "Montag - Sonntag",
     },
     eventDialog: {
       eventUpdated: "Ereignis aktualisiert",
@@ -4581,6 +4596,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "デフォルトのイベント時間（分）",
       defaultDurationHelp:
         "新しいカレンダーイベントと予約枠のデフォルト時間です。予約リンクごとに上書きできます。",
+      weekStartLabel: "週の開始日",
+      weekStartSunday: "日曜日 - 土曜日",
+      weekStartMonday: "月曜日 - 日曜日",
     },
     eventDialog: {
       eventUpdated: "イベントを更新しました",
@@ -4647,6 +4665,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "기본 이벤트 시간(분)",
       defaultDurationHelp:
         "새 캘린더 이벤트와 예약 슬롯의 기본 길이입니다. 예약 링크별로 재정의할 수 있습니다.",
+      weekStartLabel: "주 시작일",
+      weekStartSunday: "일요일 - 토요일",
+      weekStartMonday: "월요일 - 일요일",
     },
     eventDialog: {
       eventUpdated: "이벤트가 업데이트되었습니다",
@@ -4716,6 +4737,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "Duração padrão do evento (minutos)",
       defaultDurationHelp:
         "Duração padrão para novos eventos e horários de agendamento. Links de agendamento podem substituir isso por link.",
+      weekStartLabel: "A semana começa no",
+      weekStartSunday: "Domingo - sábado",
+      weekStartMonday: "Segunda-feira - domingo",
     },
     eventDialog: {
       eventUpdated: "Evento atualizado",
@@ -4784,6 +4808,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "डिफ़ॉल्ट इवेंट अवधि (मिनट)",
       defaultDurationHelp:
         "नए कैलेंडर इवेंट और बुकिंग स्लॉट की डिफ़ॉल्ट लंबाई। बुकिंग लिंक इसे प्रति लिंक बदल सकते हैं।",
+      weekStartLabel: "सप्ताह की शुरुआत",
+      weekStartSunday: "रविवार - शनिवार",
+      weekStartMonday: "सोमवार - रविवार",
     },
     eventDialog: {
       eventUpdated: "इवेंट अपडेट हो गया",
@@ -4851,6 +4878,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "مدة الحدث الافتراضية (بالدقائق)",
       defaultDurationHelp:
         "المدة الافتراضية لأحداث التقويم الجديدة وفتحات الحجز. يمكن لروابط الحجز تجاوزها لكل رابط.",
+      weekStartLabel: "يبدأ الأسبوع يوم",
+      weekStartSunday: "الأحد - السبت",
+      weekStartMonday: "الاثنين - الأحد",
     },
     eventDialog: {
       eventUpdated: "تم تحديث الحدث",

package/corpus/templates/calendar/app/lib/availability-schedule.ts

@@ -0,0 +1,53 @@
+import type { DaySchedule, TimeSlot } from "../../shared/api";
+
+export const DEFAULT_TIME_SLOT: TimeSlot = {
+  start: "09:00",
+  end: "17:00",
+};
+
+export function getEditableTimeSlots(day: DaySchedule): TimeSlot[] {
+  return day.slots.length > 0 ? day.slots : [{ ...DEFAULT_TIME_SLOT }];
+}
+
+export function setDayEnabled(day: DaySchedule, enabled: boolean): DaySchedule {
+  return {
+    ...day,
+    enabled,
+    slots: enabled ? getEditableTimeSlots(day) : day.slots,
+  };
+}
+
+export function updateTimeSlot(
+  day: DaySchedule,
+  slotIndex: number,
+  field: "start" | "end",
+  value: string,
+): DaySchedule {
+  return {
+    ...day,
+    slots: getEditableTimeSlots(day).map((slot, index) =>
+      index === slotIndex ? { ...slot, [field]: value } : slot,
+    ),
+  };
+}
+
+export function addTimeSlot(day: DaySchedule): DaySchedule {
+  return {
+    ...day,
+    slots: [...getEditableTimeSlots(day), { ...DEFAULT_TIME_SLOT }],
+  };
+}
+
+export function removeTimeSlot(
+  day: DaySchedule,
+  slotIndex: number,
+): DaySchedule {
+  const slots = getEditableTimeSlots(day).filter(
+    (_, index) => index !== slotIndex,
+  );
+
+  return {
+    ...day,
+    slots: slots.length > 0 ? slots : [{ ...DEFAULT_TIME_SLOT }],
+  };
+}

package/corpus/templates/calendar/app/lib/event-form-utils.ts

@@ -230,6 +230,11 @@ export function getLocalTimezone() {
   return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
 }
 
+/** New event drafts follow the viewer's browser zone unless they name one. */
+export function resolveEventTimezone(timezone?: string | null) {
+  return timezone?.trim() || getLocalTimezone();
+}
+
 function getTimezoneOffsetMs(date: Date, timezone: string) {
   const parts = new Intl.DateTimeFormat("en-US", {
     timeZone: timezone,