Add weekday filtering to event creation (#66)

felixgollnhuber · web-flow · commit 8164435370c3 · 2026-04-27T22:45:08.000+02:00
* Add weekday filter to create event form

* Address create form review feedback
diff --git a/src/components/create-event-form.test.tsx b/src/components/create-event-form.test.tsx
@@ -58,6 +58,9 @@ describe("CreateEventForm", () => {
     renderCreateEventForm("de");
 
     expect(screen.getByLabelText("Event-Titel")).toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "Verfügbare Wochentage" })).toBeInTheDocument();
+    expect(screen.getByRole("checkbox", { name: "Montag" })).toBeChecked();
+    expect(screen.getByRole("checkbox", { name: "Samstag" })).not.toBeChecked();
     expect(screen.getByRole("button", { name: "Event erstellen" })).toBeInTheDocument();
   });
 
@@ -67,6 +70,18 @@ describe("CreateEventForm", () => {
     expect(screen.getByRole("combobox", { name: "Slot size" })).toHaveTextContent("60 min");
   });
 
+  it("defaults weekdays to Monday through Friday", () => {
+    renderCreateEventForm();
+
+    expect(screen.getByRole("checkbox", { name: "Monday" })).toBeChecked();
+    expect(screen.getByRole("checkbox", { name: "Tuesday" })).toBeChecked();
+    expect(screen.getByRole("checkbox", { name: "Wednesday" })).toBeChecked();
+    expect(screen.getByRole("checkbox", { name: "Thursday" })).toBeChecked();
+    expect(screen.getByRole("checkbox", { name: "Friday" })).toBeChecked();
+    expect(screen.getByRole("checkbox", { name: "Saturday" })).not.toBeChecked();
+    expect(screen.getByRole("checkbox", { name: "Sunday" })).not.toBeChecked();
+  });
+
   it("shows a friendly inline title validation message before submitting", () => {
     const fetchMock = vi.fn();
     global.fetch = fetchMock as typeof fetch;
@@ -191,6 +206,68 @@ describe("CreateEventForm", () => {
     });
   });
 
+  it("submits only enabled weekdays from the selected date range", async () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-04-02T10:00:00.000Z"));
+
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        manageKey: "manage-key-123",
+      }),
+    });
+    global.fetch = fetchMock as typeof fetch;
+
+    renderCreateEventForm();
+    vi.useRealTimers();
+    const user = userEvent.setup();
+
+    await user.type(screen.getByLabelText("Event title"), "Sprint planning");
+    await user.click(screen.getByRole("checkbox", { name: "Friday" }));
+    await user.click(screen.getByRole("checkbox", { name: "Sunday" }));
+    await user.click(screen.getByRole("button", { name: "Create event" }));
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+    });
+
+    const [, requestInit] = fetchMock.mock.calls[0] as [string, RequestInit];
+    const payload = JSON.parse(String(requestInit.body)) as {
+      dates: string[];
+    };
+
+    expect(payload.dates).toEqual(["2026-04-05"]);
+  });
+
+  it("requires at least one enabled weekday inside the selected date range", async () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-04-02T10:00:00.000Z"));
+
+    const fetchMock = vi.fn();
+    global.fetch = fetchMock as typeof fetch;
+
+    renderCreateEventForm();
+    vi.useRealTimers();
+    const user = userEvent.setup();
+
+    await user.type(screen.getByLabelText("Event title"), "Sprint planning");
+    await user.click(screen.getByRole("checkbox", { name: "Friday" }));
+    await user.click(screen.getByRole("button", { name: "Create event" }));
+
+    expect(
+      screen.getByText("Select at least one available weekday inside the date range."),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "Available weekdays" })).toHaveAttribute(
+      "aria-invalid",
+      "true",
+    );
+    expect(screen.getByRole("group", { name: "Available weekdays" })).toHaveAttribute(
+      "aria-describedby",
+      "weekday-filter-description weekday-filter-error",
+    );
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
   it("submits the optional notification email when alerts are available", async () => {
     const user = userEvent.setup();
     const fetchMock = vi.fn().mockResolvedValue({
diff --git a/src/components/create-event-form.tsx b/src/components/create-event-form.tsx
@@ -5,6 +5,7 @@ import type { DateRange } from "react-day-picker";
 import {
   CalendarRangeIcon,
   ChevronDownIcon,
+  CheckIcon,
   Loader2Icon,
   SparklesIcon,
 } from "lucide-react";
@@ -50,6 +51,7 @@ const eventFieldOrder = [
   "notificationEmail",
   "timezone",
   "dates",
+  "weekdays",
   "dayStartMinutes",
   "dayEndMinutes",
   "slotMinutes",
@@ -64,6 +66,7 @@ const eventFieldIds: Record<EventField, string> = {
   notificationEmail: "notification-email",
   timezone: "timezone-trigger",
   dates: "date-range-trigger",
+  weekdays: "weekday-filter",
   dayStartMinutes: "day-start-trigger",
   dayEndMinutes: "day-end-trigger",
   slotMinutes: "slot-size-trigger",
@@ -72,6 +75,28 @@ const eventFieldIds: Record<EventField, string> = {
 
 const eventFieldSet = new Set<EventField>(eventFieldOrder);
 
+const weekdayOptions = [
+  { value: 1, messageKey: "monday", defaultSelected: true },
+  { value: 2, messageKey: "tuesday", defaultSelected: true },
+  { value: 3, messageKey: "wednesday", defaultSelected: true },
+  { value: 4, messageKey: "thursday", defaultSelected: true },
+  { value: 5, messageKey: "friday", defaultSelected: true },
+  { value: 6, messageKey: "saturday", defaultSelected: false },
+  { value: 0, messageKey: "sunday", defaultSelected: false },
+] as const;
+
+const defaultSelectedWeekdays = weekdayOptions
+  .filter((weekday) => weekday.defaultSelected)
+  .map((weekday) => weekday.value);
+
+function sortWeekdays(values: number[]) {
+  return [...values].sort(
+    (left, right) =>
+      weekdayOptions.findIndex((weekday) => weekday.value === left) -
+      weekdayOptions.findIndex((weekday) => weekday.value === right),
+  );
+}
+
 function getRangeLabel(
   range: DateRange | undefined,
   localeLabel: string,
@@ -103,6 +128,34 @@ function getRangeDays(range: DateRange | undefined) {
   }).length;
 }
 
+function getFilteredRangeDays(range: DateRange | undefined, selectedWeekdays: number[]) {
+  if (!range?.from || !range?.to) {
+    return 0;
+  }
+
+  const selectedWeekdaySet = new Set(selectedWeekdays);
+
+  return eachDayOfInterval({
+    start: range.from,
+    end: range.to,
+  }).filter((date) => selectedWeekdaySet.has(date.getDay())).length;
+}
+
+function expandRangeToDateKeys(range: DateRange, selectedWeekdays: number[]) {
+  if (!range.from || !range.to) {
+    return [];
+  }
+
+  const selectedWeekdaySet = new Set(selectedWeekdays);
+
+  return eachDayOfInterval({
+    start: range.from,
+    end: range.to,
+  })
+    .filter((date) => selectedWeekdaySet.has(date.getDay()))
+    .map((date) => format(date, "yyyy-MM-dd"));
+}
+
 export function CreateEventForm({
   timezones,
   timeOptions,
@@ -148,14 +201,9 @@ export function CreateEventForm({
   const [dayEndMinutes, setDayEndMinutes] = useState(
     defaultCreateEventDefaults.dayEndMinutes,
   );
-
-  const selectedDates =
-    dateRange?.from && dateRange?.to
-      ? eachDayOfInterval({
-          start: dateRange.from,
-          end: dateRange.to,
-        }).map((date) => format(date, "yyyy-MM-dd"))
-      : [];
+  const [selectedWeekdays, setSelectedWeekdays] = useState<number[]>(
+    defaultSelectedWeekdays,
+  );
 
   const compactDateLabel = locale === "de" ? "d. MMM yyyy" : "MMM d, yyyy";
   const selectedRangeLabel = getRangeLabel(dateRange, compactDateLabel, messages, dateFnsLocale);
@@ -167,6 +215,7 @@ export function CreateEventForm({
   );
   const selectedRangeDays = getRangeDays(dateRange);
   const draftRangeDays = getRangeDays(draftDateRange);
+  const selectedFilteredRangeDays = getFilteredRangeDays(dateRange, selectedWeekdays);
   const timezoneOptions = useMemo(
     () =>
       buildTimezoneOptions(
@@ -255,6 +304,17 @@ export function CreateEventForm({
     setIsRangePickerOpen(false);
   }
 
+  function toggleWeekday(value: number) {
+    setSelectedWeekdays((current) => {
+      if (current.includes(value)) {
+        return current.filter((weekday) => weekday !== value);
+      }
+
+      return sortWeekdays([...current, value]);
+    });
+    clearErrors("weekdays", "dates");
+  }
+
   function onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     setErrorMessage(null);
@@ -267,6 +327,16 @@ export function CreateEventForm({
       return;
     }
 
+    const selectedDates = expandRangeToDateKeys(dateRange, selectedWeekdays);
+
+    if (selectedDates.length === 0) {
+      setFieldErrors({
+        weekdays: messages.validation.eventCreate.weekdayRequired,
+      });
+      focusField("weekdays");
+      return;
+    }
+
     const parsed = createEventCreateSchema(messages).safeParse({
       title,
       notificationEmail: notificationsConfigured ? notificationEmail : undefined,
@@ -522,6 +592,66 @@ export function CreateEventForm({
                   </p>
                 ) : null}
               </div>
+
+              <fieldset
+                id={eventFieldIds.weekdays}
+                tabIndex={-1}
+                aria-describedby={
+                  fieldErrors.weekdays
+                    ? "weekday-filter-description weekday-filter-error"
+                    : "weekday-filter-description"
+                }
+                aria-invalid={fieldErrors.weekdays ? true : undefined}
+                className="space-y-2 rounded-md focus:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 md:col-span-2"
+              >
+                <legend className="sr-only">{messages.createEvent.weekdays.label}</legend>
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                  <span className="text-sm font-medium">{messages.createEvent.weekdays.label}</span>
+                  <Badge variant="secondary" className="rounded-full px-2.5">
+                    {plural(messages.createEvent.range.days, selectedFilteredRangeDays)}
+                  </Badge>
+                </div>
+                <p id="weekday-filter-description" className="text-sm text-muted-foreground">
+                  {messages.createEvent.weekdays.description}
+                </p>
+                <div className="grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-7">
+                  {weekdayOptions.map((weekday) => {
+                    const isSelected = selectedWeekdays.includes(weekday.value);
+                    const weekdayMessage =
+                      messages.createEvent.weekdays.options[weekday.messageKey];
+
+                    return (
+                      <label
+                        key={weekday.value}
+                        className={cn(
+                          "flex min-h-12 cursor-pointer items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm transition-colors",
+                          isSelected
+                            ? "border-primary bg-primary/10 text-foreground"
+                            : "border-border bg-background text-muted-foreground hover:bg-muted/50",
+                        )}
+                      >
+                        <input
+                          type="checkbox"
+                          className="sr-only"
+                          aria-label={weekdayMessage.label}
+                          checked={isSelected}
+                          onChange={() => toggleWeekday(weekday.value)}
+                        />
+                        <span className="min-w-0" aria-hidden="true">
+                          <span className="block font-medium">{weekdayMessage.shortLabel}</span>
+                          <span className="block truncate text-xs">{weekdayMessage.label}</span>
+                        </span>
+                        {isSelected ? <CheckIcon className="size-4 shrink-0" aria-hidden="true" /> : null}
+                      </label>
+                    );
+                  })}
+                </div>
+                {fieldErrors.weekdays ? (
+                  <p id="weekday-filter-error" className="text-sm text-destructive">
+                    {fieldErrors.weekdays}
+                  </p>
+                ) : null}
+              </fieldset>
             </div>
 
             <Separator />
@@ -709,7 +839,7 @@ export function CreateEventForm({
               </div>
               <div className="flex items-center justify-between gap-4">
                 <dt className="text-muted-foreground">{messages.createEvent.previewFields.daysShown}</dt>
-                <dd className="font-medium">{selectedRangeDays}</dd>
+                <dd className="font-medium">{selectedFilteredRangeDays}</dd>
               </div>
               <div className="flex items-center justify-between gap-4">
                 <dt className="text-muted-foreground">{messages.createEvent.previewFields.dailyWindow}</dt>
diff --git a/src/lib/i18n/messages.ts b/src/lib/i18n/messages.ts
