Update full-day date range defaults (#69)

* Update full-day date range defaults

* Refine full-day date range defaults

Author: felixgollnhuber

src/components/create-event-form.test.tsx

@@ -285,16 +285,18 @@ describe("CreateEventForm", () => {
     global.fetch = fetchMock as typeof fetch;
 
     renderCreateEventForm();
-    vi.useRealTimers();
-    const user = userEvent.setup();
 
-    await user.type(screen.getByLabelText("Event title"), "Offsite days");
-    await user.click(screen.getByRole("radio", { name: /Full days/i }));
+    fireEvent.change(screen.getByLabelText("Event title"), {
+      target: { value: "Offsite days" },
+    });
+    fireEvent.click(screen.getByRole("radio", { name: /Full days/i }));
 
     expect(screen.queryByRole("combobox", { name: "Daily start" })).not.toBeInTheDocument();
     expect(screen.queryByRole("combobox", { name: "Slot size" })).not.toBeInTheDocument();
+    expect(screen.getAllByText("Apr 2, 2026 - May 2, 2026").length).toBeGreaterThan(0);
 
-    await user.click(screen.getByRole("button", { name: "Create event" }));
+    vi.useRealTimers();
+    fireEvent.click(screen.getByRole("button", { name: "Create event" }));
 
     await waitFor(() => {
       expect(fetchMock).toHaveBeenCalledTimes(1);
@@ -307,7 +309,21 @@ describe("CreateEventForm", () => {
     };
 
     expect(payload.eventType).toBe("full_day");
-    expect(payload.dates).toEqual(["2026-04-03"]);
+    expect(payload.dates[0]).toBe("2026-04-02");
+    expect(payload.dates[payload.dates.length - 1]).toBe("2026-05-01");
+  });
+
+  it("uses the current day when switching a still-default range to full-day after midnight", async () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-04-02T10:00:00.000Z"));
+
+    renderCreateEventForm();
+
+    vi.setSystemTime(new Date("2026-04-03T00:30:00.000Z"));
+
+    fireEvent.click(screen.getByRole("radio", { name: /Full days/i }));
+
+    expect(screen.getAllByText("Apr 3, 2026 - May 3, 2026").length).toBeGreaterThan(0);
   });
 
   it("submits the optional notification email when alerts are available", async () => {

src/components/create-event-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { addDays, eachDayOfInterval, format, isAfter, startOfToday } from "date-fns";
+import { addDays, addMonths, eachDayOfInterval, format, isAfter, startOfToday } from "date-fns";
 import type { DateRange } from "react-day-picker";
 import {
   CalendarDaysIcon,
@@ -36,6 +36,7 @@ import {
 import { meetingDurationOptions, slotMinuteOptions } from "@/lib/constants";
 import { useI18n } from "@/lib/i18n/context";
 import { buildTimezoneOptions } from "@/lib/timezone-options";
+import type { EventType } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import { createEventCreateSchema } from "@/lib/validators";
 
@@ -93,6 +94,21 @@ const defaultSelectedWeekdays = weekdayOptions
   .filter((weekday) => weekday.defaultSelected)
   .map((weekday) => weekday.value);
 
+function getDefaultDateRange(eventType: EventType, today: Date): DateRange {
+  if (eventType === "full_day") {
+    return {
+      from: today,
+      to: addMonths(today, 1),
+    };
+  }
+
+  const tomorrow = addDays(today, 1);
+  return {
+    from: tomorrow,
+    to: addDays(tomorrow, 2),
+  };
+}
+
 function sortWeekdays(values: number[]) {
   return [...values].sort(
     (left, right) =>
@@ -171,23 +187,13 @@ export function CreateEventForm({
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [fieldErrors, setFieldErrors] = useState<EventFormErrors>({});
   const [isRangePickerOpen, setIsRangePickerOpen] = useState(false);
-  const [eventType, setEventType] = useState<"time_grid" | "full_day">("time_grid");
+  const [initialDateRange] = useState(() => getDefaultDateRange("time_grid", startOfToday()));
+  const [eventType, setEventType] = useState<EventType>("time_grid");
   const [title, setTitle] = useState("");
   const [notificationEmail, setNotificationEmail] = useState("");
-  const [dateRange, setDateRange] = useState<DateRange | undefined>(() => {
-    const tomorrow = addDays(new Date(), 1);
-    return {
-      from: tomorrow,
-      to: addDays(tomorrow, 2),
-    };
-  });
-  const [draftDateRange, setDraftDateRange] = useState<DateRange | undefined>(() => {
-    const tomorrow = addDays(new Date(), 1);
-    return {
-      from: tomorrow,
-      to: addDays(tomorrow, 2),
-    };
-  });
+  const [dateRange, setDateRange] = useState<DateRange | undefined>(initialDateRange);
+  const [draftDateRange, setDraftDateRange] = useState<DateRange | undefined>(initialDateRange);
+  const [usesDefaultDateRange, setUsesDefaultDateRange] = useState(true);
   const [timezone, setTimezone] = useState(() => {
     const browserTimezone =
       typeof window !== "undefined"
@@ -309,6 +315,7 @@ export function CreateEventForm({
     }
 
     setDateRange(draftDateRange);
+    setUsesDefaultDateRange(false);
     clearErrors("dates");
     setIsRangePickerOpen(false);
   }
@@ -324,6 +331,17 @@ export function CreateEventForm({
     clearErrors("weekdays", "dates");
   }
 
+  function selectEventType(nextEventType: EventType) {
+    if (usesDefaultDateRange) {
+      const nextDefaultRange = getDefaultDateRange(nextEventType, startOfToday());
+      setDateRange(nextDefaultRange);
+      setDraftDateRange(nextDefaultRange);
+      clearErrors("dates", "weekdays");
+    }
+
+    setEventType(nextEventType);
+  }
+
   function onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     setErrorMessage(null);
@@ -446,7 +464,7 @@ export function CreateEventForm({
                     eventType === "time_grid" && "border-primary bg-primary/8",
                   )}
                   onClick={() => {
-                    setEventType("time_grid");
+                    selectEventType("time_grid");
                     clearErrors("eventType");
                   }}
                 >
@@ -469,7 +487,7 @@ export function CreateEventForm({
                     eventType === "full_day" && "border-primary bg-primary/8",
                   )}
                   onClick={() => {
-                    setEventType("full_day");
+                    selectEventType("full_day");
                     clearErrors(
                       "eventType",
                       "dayStartMinutes",