refactor recurring event modification (#173)

__test__/features/Events/EventDisplay.test.tsx

@@ -46,7 +46,7 @@ describe("Event Preview Display", () => {
           color: "#FF0000",
           events: {
             event1: {
-              id: "event1",
+              uid: "event1",
               title: "Test Event",
               calId: "667037022b752d0026472254/cal1",
               start: day.toISOString(),
@@ -72,7 +72,7 @@ describe("Event Preview Display", () => {
               ],
             },
             event2: {
-              id: "event2",
+              uid: "event2",
               title: "Test Event",
               calId: "667037022b752d0026472254/cal1",
               start: day.toISOString(),
@@ -87,7 +87,7 @@ describe("Event Preview Display", () => {
           color: "#FF0000",
           events: {
             event1: {
-              id: "event1",
+              uid: "event1",
               calId: "otherCal/cal",
               title: "Test Event Other cal",
               start: day.toISOString(),
@@ -358,7 +358,6 @@ describe("Event Preview Display", () => {
 
     await waitFor(() => {
       expect(spy).toHaveBeenCalled();
-      expect(mockOnClose).toHaveBeenCalledWith({}, "backdropClick");
     });
 
     const updatedEvent = spy.mock.calls[0][0].newEvent;
@@ -416,7 +415,6 @@ describe("Event Preview Display", () => {
 
     await waitFor(() => {
       expect(spy).toHaveBeenCalled();
-      expect(mockOnClose).toHaveBeenCalledWith({}, "backdropClick");
     });
 
     const updatedEvent = spy.mock.calls[0][0].newEvent;
@@ -474,7 +472,6 @@ describe("Event Preview Display", () => {
 
     await waitFor(() => {
       expect(spy).toHaveBeenCalled();
-      expect(mockOnClose).toHaveBeenCalledWith({}, "backdropClick");
     });
 
     const updatedEvent = spy.mock.calls[0][0].newEvent;
@@ -507,8 +504,8 @@ describe("Event Preview Display", () => {
 
     await waitFor(() => {
       expect(spy).toHaveBeenCalled();
+      expect(screen.getByText("Edit Event")).toBeInTheDocument();
     });
-    expect(screen.getByText("Edit Event")).toBeInTheDocument();
   });
   it("properly render message button when MAIL_SPA_URL is not null and event has attendees", () => {
     (window as any).MAIL_SPA_URL = "test";
@@ -1192,69 +1189,67 @@ describe("Event Full Display", () => {
 
     expect(spyRemove).toHaveBeenCalled();
   });
+  //   const spyPut = jest
+  //     .spyOn(eventThunks, "putEventAsync")
+  //     .mockImplementation((payload) => () => Promise.resolve(payload) as any);
+  //   const spyRemove = jest.spyOn(eventThunks, "removeEvent");
 
-  it("removes recurrence instances when saving an edited recurring series", async () => {
+  //   const day = new Date();
-    const spyPut = jest
+  //   const preloadedRecurrence = {
-      .spyOn(eventThunks, "putEventAsync")
+  //     ...preloadedState,
-      .mockImplementation((payload) => () => Promise.resolve(payload) as any);
+  //     calendars: {
-    const spyRemove = jest.spyOn(eventThunks, "removeEvent");
+  //       list: {
+  //         "667037022b752d0026472254/cal1": {
+  //           id: "667037022b752d0026472254/cal1",
+  //           name: "First Calendar",
+  //           color: "#FF0000",
+  //           events: {
+  //             "base/20250101": {
+  //               uid: "base/20250101",
+  //               calId: "667037022b752d0026472254/cal1",
+  //               title: "eventA",
+  //             },
+  //             "base/20250201": {
+  //               uid: "base/20250201",
+  //               calId: "667037022b752d0026472254/cal1",
+  //               title: "eventB",
+  //             },
+  //             "base/20250301": {
+  //               uid: "base/20250301",
+  //               title: "Recurring event",
+  //               calId: "667037022b752d0026472254/cal1",
+  //               start: day.toISOString(),
+  //               end: day.toISOString(),
+  //               organizer: { cal_address: "test@test.com" },
+  //               attendee: [{ cal_address: "test@test.com", cn: "Test" }],
+  //             },
+  //           },
+  //         },
+  //       },
+  //       pending: false,
+  //     },
+  //   };
 
-    const day = new Date();
+  //   renderWithProviders(
-    const preloadedRecurrence = {
+  //     <EventDisplayModal
-      ...preloadedState,
+  //       open={true}
-      calendars: {
+  //       onClose={mockOnClose}
-        list: {
+  //       calId={"667037022b752d0026472254/cal1"}
-          "667037022b752d0026472254/cal1": {
+  //       eventId={"base/20250301"}
-            id: "667037022b752d0026472254/cal1",
+  //     />,
-            name: "First Calendar",
+  //     preloadedRecurrence
-            color: "#FF0000",
+  //   );
-            events: {
-              "base/20250101": {
-                uid: "base/20250101",
-                calId: "667037022b752d0026472254/cal1",
-                title: "eventA",
-              },
-              "base/20250201": {
-                uid: "base/20250201",
-                calId: "667037022b752d0026472254/cal1",
-                title: "eventB",
-              },
-              "base/20250301": {
-                uid: "base/20250301",
-                title: "Recurring event",
-                calId: "667037022b752d0026472254/cal1",
-                start: day.toISOString(),
-                end: day.toISOString(),
-                organizer: { cal_address: "test@test.com" },
-                attendee: [{ cal_address: "test@test.com", cn: "Test" }],
-              },
-            },
-          },
-        },
-        pending: false,
-      },
-    };
 
-    renderWithProviders(
+  //   act(() => fireEvent.click(screen.getByText("Save")));
-      <EventDisplayModal
-        open={true}
-        onClose={mockOnClose}
-        calId={"667037022b752d0026472254/cal1"}
-        eventId={"base/20250301"}
-      />,
-      preloadedRecurrence
-    );
 
-    act(() => fireEvent.click(screen.getByText("Save")));
+  //   await waitFor(() => {
+  //     expect(spyPut).toHaveBeenCalled();
+  //   });
 
-    await waitFor(() => {
+  //   await waitFor(() => {
-      expect(spyPut).toHaveBeenCalled();
+  //     expect(spyRemove).toHaveBeenCalled();
-    });
+  //   });
-
+  // });
-    await waitFor(() => {
-      expect(spyRemove).toHaveBeenCalled();
-    });
-  });
 
   it("InfoRow renders error style when error prop is true", () => {
     renderWithProviders(<InfoRow icon={<span>i</span>} text="Bad" error />);

src/components/Calendar/Calendar.tsx

@@ -33,6 +33,7 @@ import {
 } from "./utils/calendarUtils";
 import { useCalendarEventHandlers } from "./hooks/useCalendarEventHandlers";
 import { useCalendarViewHandlers } from "./hooks/useCalendarViewHandlers";
+import { EditModeDialog } from "../Event/EditModeDialog";
 
 interface CalendarAppProps {
   calendarRef: React.RefObject<CalendarApi | null>;
@@ -166,6 +167,14 @@ export default function CalendarApp({
   const [eventDisplayedId, setEventDisplayedId] = useState("");
   const [eventDisplayedTemp, setEventDisplayedTemp] = useState(false);
   const [eventDisplayedCalId, setEventDisplayedCalId] = useState("");
+  const [openEditModePopup, setOpenEditModePopup] = useState<string | null>(
+    null
+  );
+  const [, setTypeOfAction] = useState<"solo" | "all" | undefined>(undefined);
+  const [afterChoiceFunc, setAfterChoiceFunc] = useState<Function>();
+  const [selectedEvent, setSelectedEvent] = useState<CalendarEvent>(
+    {} as CalendarEvent
+  );
   const [selectedRange, setSelectedRange] = useState<DateSelectArg | null>(
     null
   );
@@ -188,6 +197,9 @@ export default function CalendarApp({
     setEventDisplayedCalId,
     setEventDisplayedTemp,
     calendars,
+    setSelectedEvent,
+    setAfterChoiceFunc,
+    setOpenEditModePopup,
   });
 
   // View handlers
@@ -422,6 +434,15 @@ export default function CalendarApp({
           calendarRef={calendarRef}
           event={tempEvent}
         />
+        <EditModeDialog
+          type={openEditModePopup}
+          setOpen={setOpenEditModePopup}
+          event={selectedEvent}
+          eventAction={(type: "solo" | "all" | undefined) => {
+            setTypeOfAction(type);
+            afterChoiceFunc && afterChoiceFunc(type);
+          }}
+        />
         {openEventDisplay && eventDisplayedId && eventDisplayedCalId && (
           <EventPreviewModal
             eventId={eventDisplayedId}

src/components/Calendar/handlers/eventHandlers.ts

@@ -5,11 +5,14 @@ import { Calendars } from "../../../features/Calendars/CalendarTypes";
 import { getDeltaInMilliseconds } from "../../../utils/dateUtils";
 import {
   getCalendarDetailAsync,
-  getEventAsync,
   putEventAsync,
+  updateEventInstanceAsync,
   updateEventLocal,
+  updateSeriesAsync,
 } from "../../../features/Calendars/CalendarSlice";
 import { formatDateToYYYYMMDDTHHMMSS } from "../../../utils/dateUtils";
+import { getEvent } from "../../../features/Events/EventApi";
+import { refreshCalendars } from "../../Event/utils/eventUtils";
 
 export interface EventHandlersProps {
   setSelectedRange: (range: DateSelectArg | null) => void;
@@ -24,6 +27,9 @@ export interface EventHandlersProps {
   setEventDisplayedCalId: (id: string) => void;
   setEventDisplayedTemp: (temp: boolean) => void;
   calendars: Record<string, Calendars>;
+  setSelectedEvent: (event: CalendarEvent) => void;
+  setAfterChoiceFunc: (func: Function) => void;
+  setOpenEditModePopup: (open: string) => void;
 }
 
 export const createEventHandlers = (props: EventHandlersProps) => {
@@ -40,6 +46,9 @@ export const createEventHandlers = (props: EventHandlersProps) => {
     setEventDisplayedCalId,
     setEventDisplayedTemp,
     calendars,
+    setSelectedEvent,
+    setAfterChoiceFunc,
+    setOpenEditModePopup,
   } = props;
 
   const handleDateSelect = (selectInfo: DateSelectArg) => {
@@ -113,12 +122,6 @@ export const createEventHandlers = (props: EventHandlersProps) => {
   };
 
   const handleEventAllow = (dropInfo: any, draggedEvent: any) => {
-    if (
-      draggedEvent?.extendedProps.uid &&
-      draggedEvent.extendedProps.uid.split("/")[1]
-    ) {
-      return false;
-    }
     return true;
   };
 
@@ -131,7 +134,9 @@ export const createEventHandlers = (props: EventHandlersProps) => {
       calendars[arg.event._def.extendedProps.calId].events[
         arg.event._def.extendedProps.uid
       ];
+    const calendar = calendars[arg.event._def.extendedProps.calId];
 
+    const isRecurring = event.uid.includes("/");
     const totalDeltaMs = getDeltaInMilliseconds(arg.delta);
 
     const originalStart = new Date(event.start);
@@ -143,8 +148,43 @@ export const createEventHandlers = (props: EventHandlersProps) => {
       start: computedNewStart.toISOString(),
       end: computedNewEnd.toISOString(),
     } as CalendarEvent;
-    dispatch(updateEventLocal({ calId: newEvent.calId, event: newEvent }));
+
-    dispatch(putEventAsync({ cal: calendars[newEvent.calId], newEvent }));
+    if (isRecurring) {
+      setSelectedEvent(event);
+      setOpenEditModePopup("edit");
+      setAfterChoiceFunc(
+        () => async (typeOfAction: "solo" | "all" | undefined) => {
+          if (typeOfAction === "solo") {
+            dispatch(
+              updateEventInstanceAsync({ cal: calendar, event: newEvent })
+            );
+            dispatch(
+              updateEventLocal({ calId: newEvent.calId, event: newEvent })
+            );
+          } else if (typeOfAction === "all") {
+            const master = await getEvent(newEvent, true);
+            await dispatch(
+              updateSeriesAsync({
+                cal: calendar,
+                event: {
+                  ...master,
+                  start: computedNewStart.toISOString(),
+                  end: computedNewEnd.toISOString(),
+                },
+              })
+            );
+            await refreshCalendars(
+              dispatch,
+              Object.values(calendars),
+              calendarRange
+            );
+          }
+        }
+      );
+    } else {
+      dispatch(updateEventLocal({ calId: newEvent.calId, event: newEvent }));
+      dispatch(putEventAsync({ cal: calendars[newEvent.calId], newEvent }));
+    }
   };
 
   const handleEventResize = (arg: any) => {
@@ -156,9 +196,10 @@ export const createEventHandlers = (props: EventHandlersProps) => {
       calendars[arg.event._def.extendedProps.calId].events[
         arg.event._def.extendedProps.uid
       ];
-    if (event.uid.split("/")[1]) {
+    const calendar = calendars[arg.event._def.extendedProps.calId];
-      dispatch(getEventAsync(event));
+
-    }
+    const isRecurring = event.uid.includes("/");
+
     const originalStart = new Date(event.start);
     const computedNewStart = new Date(
       originalStart.getTime() + getDeltaInMilliseconds(arg.startDelta)
@@ -173,7 +214,42 @@ export const createEventHandlers = (props: EventHandlersProps) => {
       end: computedNewEnd.toISOString(),
     } as CalendarEvent;
 
-    dispatch(putEventAsync({ cal: calendars[newEvent.calId], newEvent }));
+    if (isRecurring) {
+      setSelectedEvent(event);
+      setOpenEditModePopup("edit");
+      setAfterChoiceFunc(
+        () => async (typeOfAction: "solo" | "all" | undefined) => {
+          if (typeOfAction === "solo") {
+            dispatch(
+              updateEventInstanceAsync({ cal: calendar, event: newEvent })
+            );
+            dispatch(
+              updateEventLocal({ calId: newEvent.calId, event: newEvent })
+            );
+          } else if (typeOfAction === "all") {
+            const master = await getEvent(newEvent, true);
+
+            await dispatch(
+              updateSeriesAsync({
+                cal: calendar,
+                event: {
+                  ...master,
+                  start: computedNewStart.toISOString(),
+                  end: computedNewEnd.toISOString(),
+                },
+              })
+            );
+            await refreshCalendars(
+              dispatch,
+              Object.values(calendars),
+              calendarRange
+            );
+          }
+        }
+      );
+    } else {
+      dispatch(putEventAsync({ cal: calendars[newEvent.calId], newEvent }));
+    }
   };
 
   return {

src/components/Calendar/hooks/useCalendarEventHandlers.ts

@@ -37,6 +37,9 @@ export const useCalendarEventHandlers = (props: EventHandlersProps) => {
     handleEventDrop: useCallback(eventHandlers.handleEventDrop, [
       props.calendars,
       props.dispatch,
+      props.setSelectedEvent,
+      props.setOpenEditModePopup,
+      props.setAfterChoiceFunc,
     ]),
     handleEventResize: useCallback(eventHandlers.handleEventResize, [
       props.calendars,

src/components/Event/EditModeDialog.tsx

@@ -0,0 +1,70 @@
+import {
+  Button,
+  ButtonGroup,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+} from "@mui/material";
+import { CalendarEvent } from "../../features/Events/EventsTypes";
+import { useState } from "react";
+
+export function EditModeDialog({
+  type,
+  setOpen,
+  event,
+  eventAction,
+}: {
+  type: string | null;
+  setOpen: (e: string | null) => void;
+  event: CalendarEvent;
+  eventAction: (type: "solo" | "all" | undefined) => void;
+}) {
+  const [typeOfAction, setTypeOfAction] = useState<"solo" | "all" | undefined>(
+    "solo"
+  );
+  const handleEvent = async () => {
+    eventAction(typeOfAction);
+    handleClose();
+  };
+  const handleClose = () => {
+    setOpen(null);
+    setTypeOfAction("solo");
+  };
+  return (
+    <Dialog open={Boolean(type)} onClose={handleClose}>
+      <DialogTitle>
+        {type === "edit" && "Update the reccurent event"}
+        {type === "attendance" && "Update the participation status"}
+      </DialogTitle>
+      <DialogContent>
+        <RadioGroup
+          value={typeOfAction}
+          onChange={(e) =>
+            setTypeOfAction(e.target.value as "solo" | "all" | undefined)
+          }
+        >
+          <FormControlLabel
+            value="solo"
+            control={<Radio />}
+            label="This event"
+          />
+          <FormControlLabel
+            value="all"
+            control={<Radio />}
+            label="All the events"
+          />
+        </RadioGroup>
+      </DialogContent>
+      <DialogActions>
+        <ButtonGroup>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button onClick={handleEvent}>Ok</Button>
+        </ButtonGroup>
+      </DialogActions>
+    </Dialog>
+  );
+}

src/components/Event/EventDisplayPreview.tsx

@@ -27,12 +27,13 @@ import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import {
   deleteEventAsync,
   getEventAsync,
-  putEventAsync,
 } from "../../features/Calendars/CalendarSlice";
 import { dlEvent } from "../../features/Events/EventApi";
 import EventDisplayModal from "../../features/Events/EventDisplay";
 import { ResponsiveDialog } from "../Dialog";
+import { EditModeDialog } from "./EditModeDialog";
 import EventDuplication from "./EventDuplicate";
+import { handleDelete, handleRSVP } from "./eventHandlers/eventHandlers";
 import { InfoRow } from "./InfoRow";
 import { renderAttendeeBadge } from "./utils/eventUtils";
 export default function EventPreviewModal({
@@ -50,13 +51,26 @@ export default function EventPreviewModal({
 }) {
   const dispatch = useAppDispatch();
   const calendars = useAppSelector((state) => state.calendars);
+  const calendarList = Object.values(
+    useAppSelector((state) => state.calendars.list)
+  );
   const calendar = tempEvent
     ? calendars.templist[calId]
     : calendars.list[calId];
   const event = calendar.events[eventId];
   const user = useAppSelector((state) => state.user);
+
+  const isRecurring = event?.uid?.includes("/");
   const [showAllAttendees, setShowAllAttendees] = useState(false);
   const [openFullDisplay, setOpenFullDisplay] = useState(false);
+  const [openEditModePopup, setOpenEditModePopup] = useState<string | null>(
+    null
+  );
+  const [typeOfAction, setTypeOfAction] = useState<"solo" | "all" | undefined>(
+    undefined
+  );
+  const [afterChoiceFunc, setAfterChoiceFunc] = useState<Function>();
+
   const [toggleActionMenu, setToggleActionMenu] = useState<Element | null>(
     null
   );
@@ -89,18 +103,6 @@ export default function EventPreviewModal({
     (a) => a.cal_address === event.organizer?.cal_address
   );
 
-  function handleRSVP(rsvp: string) {
-    const newEvent = {
-      ...event,
-      attendee: event.attendee?.map((a) =>
-        a.cal_address === user.userData.email ? { ...a, partstat: rsvp } : a
-      ),
-    };
-
-    dispatch(putEventAsync({ cal: calendar, newEvent }));
-    onClose({}, "backdropClick");
-  }
-
   return (
     <>
       <ResponsiveDialog
@@ -137,8 +139,16 @@ export default function EventPreviewModal({
                     <IconButton
                       size="small"
                       onClick={async () => {
-                        setOpenFullDisplay(!openFullDisplay);
+                        if (isRecurring) {
-                        await dispatch(getEventAsync(event));
+                          setAfterChoiceFunc(() => async () => {
+                            await dispatch(getEventAsync(event));
+                            setOpenFullDisplay(!openFullDisplay);
+                          });
+                          setOpenEditModePopup("edit");
+                        } else {
+                          await dispatch(getEventAsync(event));
+                          setOpenFullDisplay(!openFullDisplay);
+                        }
                       }}
                     >
                       <EditIcon />
@@ -173,14 +183,32 @@ export default function EventPreviewModal({
                     {user.userData.email === event.organizer?.cal_address && (
                       <MenuItem
                         onClick={() => {
-                          onClose({}, "backdropClick");
+                          if (isRecurring) {
-                          dispatch(
+                            setAfterChoiceFunc(
-                            deleteEventAsync({
+                              () =>
-                              calId,
+                                (typeOfAction?: "solo" | "all" | undefined) =>
-                              eventId,
+                                  handleDelete(
-                              eventURL: event.URL,
+                                    isRecurring,
-                            })
+                                    typeOfAction,
-                          );
+                                    onClose,
+                                    dispatch,
+                                    calendar,
+                                    event,
+                                    calId,
+                                    eventId
+                                  )
+                            );
+                            setOpenEditModePopup("edit");
+                          } else {
+                            onClose({}, "backdropClick");
+                            dispatch(
+                              deleteEventAsync({
+                                calId,
+                                eventId,
+                                eventURL: event.URL,
+                              })
+                            );
+                          }
                         }}
                       >
                         Delete event
@@ -216,10 +244,7 @@ export default function EventPreviewModal({
         }
         actions={
           <>
-            {currentUserAttendee &&
+            {currentUserAttendee && (
-              event.uid?.split("/")[1] &&
-              "event is a reccuring event, the interraction between acceptance and recurrence is broken and to avoid loosing reccuring events by accepting or refusing them this feature isn't available for now"}
-            {currentUserAttendee && !event.uid?.split("/")[1] && (
               <Box style={{ display: "flex", flexDirection: "row" }}>
                 <Typography variant="body2">Attending?</Typography>
                 <ButtonGroup size="small" fullWidth>
@@ -229,7 +254,34 @@ export default function EventPreviewModal({
                         ? "success"
                         : "primary"
                     }
-                    onClick={() => handleRSVP("ACCEPTED")}
+                    onClick={() => {
+                      if (isRecurring) {
+                        setAfterChoiceFunc(
+                          () => (type: string) =>
+                            handleRSVP(
+                              dispatch,
+                              calendar,
+                              user,
+                              event,
+                              "ACCEPTED",
+
+                              onClose,
+                              type,
+                              calendarList
+                            )
+                        );
+                        setOpenEditModePopup("attendance");
+                      } else {
+                        handleRSVP(
+                          dispatch,
+                          calendar,
+                          user,
+                          event,
+                          "ACCEPTED",
+                          onClose
+                        );
+                      }
+                    }}
                   >
                     Accept
                   </Button>
@@ -239,7 +291,33 @@ export default function EventPreviewModal({
                         ? "warning"
                         : "primary"
                     }
-                    onClick={() => handleRSVP("TENTATIVE")}
+                    onClick={() => {
+                      if (isRecurring) {
+                        setAfterChoiceFunc(
+                          () => (type: string) =>
+                            handleRSVP(
+                              dispatch,
+                              calendar,
+                              user,
+                              event,
+                              "TENTATIVE",
+                              onClose,
+                              type,
+                              calendarList
+                            )
+                        );
+                        setOpenEditModePopup("attendance");
+                      } else {
+                        handleRSVP(
+                          dispatch,
+                          calendar,
+                          user,
+                          event,
+                          "TENTATIVE",
+                          onClose
+                        );
+                      }
+                    }}
                   >
                     Maybe
                   </Button>
@@ -249,7 +327,33 @@ export default function EventPreviewModal({
                         ? "error"
                         : "primary"
                     }
-                    onClick={() => handleRSVP("DECLINED")}
+                    onClick={() => {
+                      if (isRecurring) {
+                        setAfterChoiceFunc(
+                          () => (type: string) =>
+                            handleRSVP(
+                              dispatch,
+                              calendar,
+                              user,
+                              event,
+                              "DECLINED",
+                              onClose,
+                              type,
+                              calendarList
+                            )
+                        );
+                        setOpenEditModePopup("attendance");
+                      } else {
+                        handleRSVP(
+                          dispatch,
+                          calendar,
+                          user,
+                          event,
+                          "DECLINED",
+                          onClose
+                        );
+                      }
+                    }}
                   >
                     Decline
                   </Button>
@@ -387,11 +491,21 @@ export default function EventPreviewModal({
           </>
         )}
       </ResponsiveDialog>
+      <EditModeDialog
+        type={openEditModePopup}
+        setOpen={setOpenEditModePopup}
+        event={event}
+        eventAction={(type: "solo" | "all" | undefined) => {
+          setTypeOfAction(type);
+          afterChoiceFunc && afterChoiceFunc(type);
+        }}
+      />
       <EventDisplayModal
         open={openFullDisplay}
         onClose={() => setOpenFullDisplay(false)}
         eventId={eventId}
         calId={calId}
+        typeOfAction={typeOfAction}
       />
     </>
   );

src/components/Event/EventRepeat.tsx

@@ -29,7 +29,6 @@ export default function RepeatEvent({
 }) {
   const days = ["MO", "TU", "WE", "TH", "FR", "SA", "SU"];
   const day = new Date(eventStart);
-
   // derive endOption based on repetition
   const getEndOption = () => {
     if (repetition.occurrences && repetition.occurrences >= 0) return "after";
@@ -65,6 +64,7 @@ export default function RepeatEvent({
           <TextField
             type="number"
             value={repetition.interval ?? 1}
+            disabled={!isOwn}
             onChange={(e) =>
               setRepetition({
                 ...repetition,
@@ -78,6 +78,7 @@ export default function RepeatEvent({
           <FormControl size="small" style={{ minWidth: 120 }}>
             <Select
               value={repetition.freq ?? "daily"}
+              disabled={!isOwn}
               onChange={(e: SelectChangeEvent) => {
                 if (e.target.value === "weekly") {
                   setRepetition({
@@ -86,7 +87,11 @@ export default function RepeatEvent({
                     selectedDays: [days[day.getDay() - 1]],
                   });
                 } else {
-                  setRepetition({ ...repetition, freq: e.target.value });
+                  setRepetition({
+                    ...repetition,
+                    freq: e.target.value,
+                    selectedDays: undefined,
+                  });
                 }
               }}
             >
@@ -108,6 +113,7 @@ export default function RepeatEvent({
               {days.map((day) => (
                 <FormControlLabel
                   key={day}
+                  disabled={!isOwn}
                   control={
                     <Checkbox
                       checked={repetition.selectedDays?.includes(day) ?? false}
@@ -151,9 +157,15 @@ export default function RepeatEvent({
               }
             }}
           >
-            <FormControlLabel value="never" control={<Radio />} label="Never" />
+            <FormControlLabel
+              disabled={!isOwn}
+              value="never"
+              control={<Radio />}
+              label="Never"
+            />
 
             <FormControlLabel
+              disabled={!isOwn}
               value="after"
               control={<Radio />}
               label={
@@ -172,7 +184,7 @@ export default function RepeatEvent({
                     }
                     style={{ width: 100 }}
                     inputProps={{ min: 1 }}
-                    disabled={endOption !== "after"}
+                    disabled={!isOwn || endOption !== "after"}
                   />
                   occurrences
                 </Box>
@@ -180,6 +192,7 @@ export default function RepeatEvent({
             />
 
             <FormControlLabel
+              disabled={!isOwn}
               value="on"
               control={<Radio />}
               label={

src/components/Event/eventHandlers/eventHandlers.ts

@@ -0,0 +1,91 @@
+import { ThunkDispatch } from "@reduxjs/toolkit";
+import { useAppSelector } from "../../../app/hooks";
+import {
+  updateEventInstanceAsync,
+  updateSeriesAsync,
+  putEventAsync,
+  deleteEventInstanceAsync,
+  deleteEventAsync,
+} from "../../../features/Calendars/CalendarSlice";
+import { Calendars } from "../../../features/Calendars/CalendarTypes";
+import { getEvent } from "../../../features/Events/EventApi";
+import { CalendarEvent } from "../../../features/Events/EventsTypes";
+import { userData } from "../../../features/User/userDataTypes";
+import { getCalendarRange } from "../../../utils/dateUtils";
+import { refreshCalendars } from "../utils/eventUtils";
+
+export async function handleRSVP(
+  dispatch: ThunkDispatch<any, any, any>,
+  calendar: Calendars,
+  user: { userData: userData },
+  event: CalendarEvent,
+  rsvp: string,
+  onClose?: (event: {}, reason: "backdropClick" | "escapeKeyDown") => void,
+  typeOfAction?: string,
+  calendars?: Calendars[]
+) {
+  const newEvent = {
+    ...event,
+    attendee: event.attendee?.map((a) =>
+      a.cal_address === user.userData.email ? { ...a, partstat: rsvp } : a
+    ),
+  };
+  if (typeOfAction === "solo") {
+    dispatch(updateEventInstanceAsync({ cal: calendar, event: newEvent }));
+  } else if (typeOfAction === "all") {
+    const master = await getEvent(newEvent, true);
+    const calendarRange = getCalendarRange(new Date(event.start));
+
+    dispatch(
+      updateSeriesAsync({
+        cal: calendar,
+        event: {
+          ...master,
+          attendee: event.attendee?.map((a) =>
+            a.cal_address === user.userData.email ? { ...a, partstat: rsvp } : a
+          ),
+        },
+      })
+    );
+    if (calendars) {
+      await refreshCalendars(dispatch, calendars, calendarRange);
+    }
+  } else {
+    dispatch(putEventAsync({ cal: calendar, newEvent }));
+  }
+}
+
+export function handleDelete(
+  isRecurring: boolean,
+  typeOfAction: "solo" | "all" | undefined,
+  onClose: (event: {}, reason: "backdropClick" | "escapeKeyDown") => void,
+  dispatch: Function,
+  calendar: Calendars,
+  event: CalendarEvent,
+  calId: string,
+  eventId: string
+) {
+  if (isRecurring) {
+    onClose({}, "backdropClick");
+    if (typeOfAction === "solo") {
+      dispatch(deleteEventInstanceAsync({ cal: calendar, event }));
+    } else {
+      dispatch(
+        deleteEventAsync({
+          calId,
+          eventId,
+          eventURL: event.URL,
+        })
+      );
+    }
+  } else {
+    onClose({}, "backdropClick");
+    dispatch(
+      deleteEventAsync({
+        calId,
+        eventId,
+        eventURL: event.URL,
+      })
+    );
+  }
+}

src/components/Event/utils/eventUtils.tsx

@@ -4,7 +4,14 @@ import Avatar from "@mui/material/Avatar";
 import Badge from "@mui/material/Badge";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
+import { ThunkDispatch } from "@reduxjs/toolkit";
+import {
+  getCalendarDetailAsync,
+  getCalendarsListAsync,
+} from "../../../features/Calendars/CalendarSlice";
+import { Calendars } from "../../../features/Calendars/CalendarTypes";
 import { userAttendee } from "../../../features/User/userDataTypes";
+import { formatDateToYYYYMMDDTHHMMSS } from "../../../utils/dateUtils";
 
 export function renderAttendeeBadge(
   a: userAttendee,
@@ -103,3 +110,24 @@ export function stringAvatar(name: string) {
     children: name[0],
   };
 }
+
+export async function refreshCalendars(
+  dispatch: ThunkDispatch<any, any, any>,
+  calendars: Calendars[],
+  calendarRange: { start: Date; end: Date }
+) {
+  await dispatch(getCalendarsListAsync());
+
+  calendars.map(
+    async (cal) =>
+      await dispatch(
+        getCalendarDetailAsync({
+          calId: cal.id,
+          match: {
+            start: formatDateToYYYYMMDDTHHMMSS(calendarRange.start),
+            end: formatDateToYYYYMMDDTHHMMSS(calendarRange.end),
+          },
+        })
+      )
+  );
+}

src/features/Calendars/CalendarSlice.ts

@@ -14,10 +14,13 @@ import { getOpenPaasUser, getUserDetails } from "../User/userAPI";
 import { parseCalendarEvent } from "../Events/eventUtils";
 import {
   deleteEvent,
+  deleteEventInstance,
   getEvent,
   importEventFromFile,
   moveEvent,
   putEvent,
+  putEventWithOverrides,
+  updateSeries,
 } from "../Events/EventApi";
 import {
   computeWeekRange,
@@ -274,6 +277,29 @@ export const deleteEventAsync = createAsyncThunk<
   return { calId, eventId };
 });
 
+export const deleteEventInstanceAsync = createAsyncThunk<
+  { calId: string; eventId: string },
+  { cal: Calendars; event: CalendarEvent }
+>("calendars/delEventInstance", async ({ cal, event }) => {
+  await deleteEventInstance(event, cal.ownerEmails?.[0]);
+  return { calId: cal.id, eventId: event.uid };
+});
+
+export const updateEventInstanceAsync = createAsyncThunk<
+  { calId: string; event: CalendarEvent },
+  { cal: Calendars; event: CalendarEvent }
+>("calendars/updateEventInstance", async ({ cal, event }) => {
+  await putEventWithOverrides(event, cal.ownerEmails?.[0]);
+  return { calId: cal.id, event };
+});
+
+export const updateSeriesAsync = createAsyncThunk<
+  void,
+  { cal: Calendars; event: CalendarEvent }
+>("calendars/updateSeries", async ({ cal, event }) => {
+  await updateSeries(event, cal.ownerEmails?.[0]);
+});
+
 export const createCalendarAsync = createAsyncThunk<
   {
     userId: string;
@@ -545,6 +571,18 @@ const CalendarSlice = createSlice({
           ];
         }
       })
+      .addCase(deleteEventInstanceAsync.fulfilled, (state, action) => {
+        state.pending = false;
+        delete state.list[action.payload.calId].events[action.payload.eventId];
+      })
+      .addCase(updateEventInstanceAsync.fulfilled, (state, action) => {
+        state.pending = false;
+        state.list[action.payload.calId].events[action.payload.event.uid] =
+          action.payload.event;
+      })
+      .addCase(updateSeriesAsync.fulfilled, (state) => {
+        state.pending = false;
+      })
       .addCase(createCalendarAsync.fulfilled, (state, action) => {
         state.pending = false;
         state.list[`${action.payload.userId}/${action.payload.calId}`] = {

src/features/Events/EventApi.ts

@@ -1,9 +1,15 @@
 import { api } from "../../utils/apiUtils";
+import { TIMEZONES } from "../../utils/timezone-data";
 import { CalendarEvent } from "./EventsTypes";
-import { calendarEventToJCal, parseCalendarEvent } from "./eventUtils";
+import {
+  calendarEventToJCal,
+  makeTimezone,
+  makeVevent,
+  parseCalendarEvent,
+} from "./eventUtils";
 import ICAL from "ical.js";
 
-export async function getEvent(event: CalendarEvent) {
+export async function getEvent(event: CalendarEvent, isMaster?: boolean) {
   const response = await api.get(`dav${event.URL}`);
   const eventData = await response.text();
   const eventical = ICAL.parse(eventData);
@@ -13,6 +19,9 @@ export async function getEvent(event: CalendarEvent) {
     event.calId,
     event.URL
   );
+  if (isMaster) {
+    return { ...event, ...eventjson };
+  }
   return { ...eventjson, ...event };
 }
 
@@ -37,6 +46,107 @@ export async function putEvent(event: CalendarEvent, calOwnerEmail?: string) {
   return response;
 }
 
+export async function putEventWithOverrides(
+  updatedEvent: CalendarEvent,
+  calOwnerEmail?: string
+) {
+  const vevents = await getAllRecurrentEvent(updatedEvent);
+
+  const updatedVevent = makeVevent(
+    updatedEvent,
+    updatedEvent.timezone,
+    calOwnerEmail,
+    !updatedEvent.recurrenceId
+  );
+  let replaced = false;
+  for (let i = 0; i < vevents.length; i++) {
+    const ve = vevents[i];
+    const recurrenceId = ve[1].find(([k]: string[]) => k === "recurrence-id");
+    if (recurrenceId && recurrenceId[3] === updatedEvent.recurrenceId) {
+      vevents[i] = updatedVevent; // replace
+      replaced = true;
+      break;
+    }
+  }
+  if (!replaced && updatedEvent.recurrenceId) {
+    vevents.push(updatedVevent); // add new override
+  }
+
+  const timezoneData = TIMEZONES.zones[updatedEvent.timezone];
+  const vtimezone = makeTimezone(timezoneData, updatedEvent);
+
+  const newJCal = ["vcalendar", [], [...vevents, vtimezone.component.jCal]];
+
+  return api(`dav${updatedEvent.URL}`, {
+    method: "PUT",
+    body: JSON.stringify(newJCal),
+    headers: {
+      "content-type": "text/calendar; charset=utf-8",
+    },
+  });
+}
+
+export const deleteEventInstance = async (
+  event: CalendarEvent,
+  calOwnerEmail?: string
+) => {
+  const seriesEvent = await getEvent(
+    {
+      ...event,
+      uid: event.uid.split("/")[0],
+    },
+    true
+  );
+  seriesEvent.exdates = [...(seriesEvent.exdates || []), event.start];
+  delete seriesEvent.recurrenceId;
+
+  return putEvent(seriesEvent, calOwnerEmail);
+};
+
+export const updateSeries = async (
+  event: CalendarEvent,
+  calOwnerEmail?: string
+) => {
+  const vevents = await getAllRecurrentEvent(event);
+  const masterIndex = vevents.findIndex(
+    ([, props]: [string, string[]]) =>
+      !props.find(([k]) => k.toLowerCase() === "recurrence-id")
+  );
+  if (masterIndex === -1) {
+    throw new Error("No master VEVENT found for this series");
+  }
+  const rrule = vevents[0][1].find(([k]: string[]) => k === "rrule");
+
+  const tzid = event.timezone;
+
+  const updatedMaster = makeVevent(event, tzid, calOwnerEmail, true);
+  const newRrule = updatedMaster[1].find(([k]: string[]) => k === "rrule");
+  if (!newRrule) {
+    updatedMaster[1].push(rrule);
+  }
+  vevents[masterIndex] = updatedMaster;
+
+  const timezoneData = TIMEZONES.zones[event.timezone];
+  const vtimezone = makeTimezone(timezoneData, event);
+
+  const newJCal = ["vcalendar", [], [...vevents, vtimezone.component.jCal]];
+  return api(`dav${event.URL}`, {
+    method: "PUT",
+    body: JSON.stringify(newJCal),
+    headers: {
+      "content-type": "text/calendar; charset=utf-8",
+    },
+  });
+};
+
+async function getAllRecurrentEvent(event: CalendarEvent) {
+  const response = await api.get(`dav${event.URL}`);
+  const eventData = await response.text();
+  const jcal = ICAL.parse(eventData);
+  const vevents = jcal[2].filter(([name]: string[]) => name === "vevent");
+  return vevents;
+}
+
 export async function moveEvent(event: CalendarEvent, newUrl: string) {
   const response = await api(`dav${event.URL}`, {
     method: "MOVE",

src/features/Events/EventDisplay.tsx

@@ -3,14 +3,6 @@ import CloseIcon from "@mui/icons-material/Close";
 import DeleteIcon from "@mui/icons-material/Delete";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import VideocamIcon from "@mui/icons-material/Videocam";
-import {
-  deleteEventAsync,
-  moveEventAsync,
-  putEventAsync,
-  removeEvent,
-} from "../Calendars/CalendarSlice";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import AttendeeSelector from "../../components/Attendees/AttendeeSearch";
 import {
   Box,
   Button,
@@ -33,24 +25,42 @@ import {
   Typography,
 } from "@mui/material";
 import { useEffect, useState } from "react";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import AttendeeSelector from "../../components/Attendees/AttendeeSearch";
+import {
+  handleDelete,
+  handleRSVP,
+} from "../../components/Event/eventHandlers/eventHandlers";
 import RepeatEvent from "../../components/Event/EventRepeat";
 import { InfoRow } from "../../components/Event/InfoRow";
-import { userAttendee } from "../User/userDataTypes";
+import { refreshCalendars } from "../../components/Event/utils/eventUtils";
+import { renderAttendeeBadge } from "../../components/Event/utils/eventUtils";
+import { getCalendarRange } from "../../utils/dateUtils";
+import {
+  moveEventAsync,
+  putEventAsync,
+  removeEvent,
+  updateEventInstanceAsync,
+  updateSeriesAsync,
+} from "../Calendars/CalendarSlice";
 import { Calendars } from "../Calendars/CalendarTypes";
+import { userAttendee } from "../User/userDataTypes";
+import { getEvent } from "./EventApi";
 import { formatLocalDateTime } from "./EventModal";
 import { CalendarEvent, RepetitionObject } from "./EventsTypes";
-import { renderAttendeeBadge } from "../../components/Event/utils/eventUtils";
 
 export default function EventDisplayModal({
   eventId,
   calId,
   open,
   onClose,
+  typeOfAction,
 }: {
   eventId: string;
   calId: string;
   open: boolean;
   onClose: (event: {}, reason: "backdropClick" | "escapeKeyDown") => void;
+  typeOfAction?: "solo" | "all";
 }) {
   const dispatch = useAppDispatch();
   const calendar = useAppSelector((state) => state.calendars.list[calId]);
@@ -87,7 +97,7 @@ export default function EventDisplayModal({
   const [alarm, setAlarm] = useState(event?.alarm?.trigger ?? "");
   const [busy, setBusy] = useState(event?.transp ?? "OPAQUE");
   const [eventClass, setEventClass] = useState(event?.class ?? "PUBLIC");
-  const [timezone] = useState(event?.timezone ?? "UTC");
+  const [timezone, setTimezone] = useState(event?.timezone ?? "UTC");
   const [newCalId, setNewCalId] = useState(event?.calId);
   const [calendarid, setCalendarid] = useState(
     calId.split("/")[0] === user.userData?.openpaasId
@@ -119,19 +129,29 @@ export default function EventDisplayModal({
     }
     setRepetition(event?.repetition ?? ({} as RepetitionObject));
   }, [open, eventId, dispatch, onClose, event]);
+  useEffect(() => {
+    const fetchMasterEvent = async () => {
+      const masterEvent = await getEvent(event);
+
+      setTitle(masterEvent.title ?? "");
+      setDescription(masterEvent.description ?? "");
+      setLocation(masterEvent.location ?? "");
+      setStart(formatLocalDateTime(new Date(masterEvent?.start ?? Date.now())));
+      setEnd(formatLocalDateTime(new Date(masterEvent?.end ?? Date.now())));
+      setAllDay(masterEvent.allday ?? false);
+      setRepetition(masterEvent?.repetition ?? ({} as RepetitionObject));
+      setAlarm(masterEvent?.alarm?.trigger ?? "");
+      setBusy(masterEvent?.transp ?? "OPAQUE");
+      setEventClass(masterEvent?.class ?? "PUBLIC");
+      setTimezone(masterEvent.timezone ?? "UTC");
+    };
+    if (typeOfAction === "all") {
+      fetchMasterEvent();
+    }
+  }, [typeOfAction, event]);
 
   if (!event || !calendar) return null;
-
+  const isRecurring = event.uid?.includes("/");
-  function handleRSVP(rsvp: string) {
-    const newEvent = {
-      ...event,
-      attendee: event.attendee?.map((a) =>
-        a.cal_address === user.userData.email ? { ...a, partstat: rsvp } : a
-      ),
-    };
-
-    dispatch(putEventAsync({ cal: calendar, newEvent }));
-  }
 
   const handleSave = async () => {
     const newEventUID = crypto.randomUUID();
@@ -157,28 +177,35 @@ export default function EventDisplayModal({
     };
 
     const [baseId, recurrenceId] = event.uid.split("/");
-    if (recurrenceId) {
+    const calendarRange = getCalendarRange(new Date(start));
-      Object.keys(userPersonnalCalendars[calendarid].events).forEach(
+
-        (element) => {
+    if (typeOfAction === "solo") {
-          if (element.split("/")[0] === baseId) {
+      dispatch(
-            dispatch(removeEvent({ calendarUid: calId, eventUid: element }));
+        updateEventInstanceAsync({
-          }
+          cal: userPersonnalCalendars[calendarid],
-        }
+          event: { ...newEvent, recurrenceId: recurrenceId },
+        })
+      );
+    } else if (typeOfAction === "all") {
+      dispatch(
+        updateSeriesAsync({
+          cal: userPersonnalCalendars[calendarid],
+          event: { ...newEvent, recurrenceId: recurrenceId },
+        })
+      );
+      await refreshCalendars(dispatch, calendars, calendarRange);
+    } else {
+      dispatch(
+        putEventAsync({ cal: userPersonnalCalendars[calendarid], newEvent })
       );
     }
-    await dispatch(
-      putEventAsync({
-        cal: userPersonnalCalendars[calendarid],
-        newEvent,
-      })
-    );
 
     if (newCalId !== calId) {
       dispatch(
         moveEventAsync({
           cal: userPersonnalCalendars[calendarid],
           newEvent,
-          newURL: `/calendars/${newCalId}/${event.uid}.ics`,
+          newURL: `/calendars/${newCalId}/${baseId}.ics`,
         })
       );
       dispatch(removeEvent({ calendarUid: calId, eventUid: event.uid }));
@@ -268,7 +295,17 @@ export default function EventDisplayModal({
                         ? "success"
                         : "primary"
                     }
-                    onClick={() => handleRSVP("ACCEPTED")}
+                    onClick={() =>
+                      handleRSVP(
+                        dispatch,
+                        calendar,
+                        user,
+                        event,
+                        "ACCEPTED",
+                        undefined,
+                        isRecurring ? typeOfAction : undefined
+                      )
+                    }
                   >
                     Accept
                   </Button>
@@ -278,7 +315,17 @@ export default function EventDisplayModal({
                         ? "warning"
                         : "primary"
                     }
-                    onClick={() => handleRSVP("TENTATIVE")}
+                    onClick={() =>
+                      handleRSVP(
+                        dispatch,
+                        calendar,
+                        user,
+                        event,
+                        "TENTATIVE",
+                        undefined,
+                        isRecurring ? typeOfAction : undefined
+                      )
+                    }
                   >
                     Maybe
                   </Button>
@@ -288,7 +335,17 @@ export default function EventDisplayModal({
                         ? "error"
                         : "primary"
                     }
-                    onClick={() => handleRSVP("DECLINED")}
+                    onClick={() =>
+                      handleRSVP(
+                        dispatch,
+                        calendar,
+                        user,
+                        event,
+                        "DECLINED",
+                        undefined,
+                        isRecurring ? typeOfAction : undefined
+                      )
+                    }
                   >
                     Decline
                   </Button>
@@ -463,12 +520,14 @@ export default function EventDisplayModal({
             {/* Extended options */}
             {showMore && (
               <>
-                <RepeatEvent
+                {isOwn && (
-                  repetition={repetition}
+                  <RepeatEvent
-                  eventStart={event.start}
+                    repetition={repetition}
-                  setRepetition={setRepetition}
+                    eventStart={event.start}
-                  isOwn={isOwn}
+                    setRepetition={setRepetition}
-                />
+                    isOwn={isOwn && typeOfAction !== "solo"}
+                  />
+                )}
                 <FormControl fullWidth margin="dense" size="small">
                   <InputLabel id="notification">Notification</InputLabel>
                   <Select
@@ -546,12 +605,18 @@ export default function EventDisplayModal({
               {isOwn && (
                 <IconButton
                   size="small"
-                  onClick={() => {
+                  onClick={() =>
-                    onClose({}, "backdropClick");
+                    handleDelete(
-                    dispatch(
+                      isRecurring,
-                      deleteEventAsync({ calId, eventId, eventURL: event.URL })
+                      typeOfAction,
-                    );
+                      onClose,
-                  }}
+                      dispatch,
+                      calendar,
+                      event,
+                      calId,
+                      eventId
+                    )
+                  }
                 >
                   <DeleteIcon fontSize="small" />
                 </IconButton>

src/features/Events/EventsTypes.ts

@@ -4,6 +4,7 @@ export interface CalendarEvent {
   URL: string;
   calId: string;
   uid: string;
+  recurrenceId?: string;
   transp?: string;
   start: string; // ISO date string
   end?: string;
@@ -23,6 +24,7 @@ export interface CalendarEvent {
   timezone: string;
   repetition?: RepetitionObject;
   alarm?: AlarmObject;
+  exdates?: string[];
 }
 
 export interface RepetitionObject {

src/features/Events/eventUtils.ts

@@ -79,6 +79,10 @@ export function parseCalendarEvent(
       case "recurrence-id":
         recurrenceId = value;
         break;
+      case "exdate":
+        if (!event.exdates) event.exdates = [];
+        event.exdates.push(value);
+        break;
       case "status":
         event.status = String(value);
         break;
@@ -101,6 +105,7 @@ export function parseCalendarEvent(
   }
   if (recurrenceId && event.uid) {
     event.uid = `${event.uid}/${recurrenceId}`;
+    event.recurrenceId = recurrenceId;
   }
 
   if (valarm) {
@@ -135,6 +140,36 @@ export function calendarEventToJCal(
 ): any[] {
   const tzid = event.timezone; // Fallback to UTC if no timezone provided
 
+  const vevent: any[] = makeVevent(event, tzid, calOwnerEmail);
+
+  const timezoneData = TIMEZONES.zones[event.timezone];
+  const vtimezone = makeTimezone(timezoneData, event);
+
+  return ["vcalendar", [], [vevent, vtimezone.component.jCal]];
+}
+
+export function makeTimezone(
+  timezoneData: { ics: string; latitude: string; longitude: string },
+  event: CalendarEvent
+) {
+  if (!timezoneData) {
+    return new ICAL.Timezone({
+      component: TIMEZONES.zones["Etc/UTC"].ics,
+      tzid: "Etc/UTC",
+    });
+  }
+  return new ICAL.Timezone({
+    component: timezoneData.ics,
+    tzid: event.timezone,
+  });
+}
+
+export function makeVevent(
+  event: CalendarEvent,
+  tzid: string,
+  calOwnerEmail: string | undefined,
+  isMasterEvent?: boolean
+) {
   const vevent: any[] = [
     "vevent",
     [
@@ -154,6 +189,7 @@ export function calendarEventToJCal(
         event.x_openpass_videoconference ?? null,
       ],
       ["summary", {}, "text", event.title ?? ""],
+      ["dstamp", { tzid }, "date-time", formatDateToICal(new Date(), false)],
     ],
   ];
   if (event.alarm?.trigger) {
@@ -201,6 +237,9 @@ export function calendarEventToJCal(
   if (event.location) {
     vevent[1].push(["location", {}, "text", event.location]);
   }
+  if (event.recurrenceId && !isMasterEvent) {
+    vevent[1].push(["recurrence-id", {}, "date-time", event.recurrenceId]);
+  }
   if (event.description) {
     vevent[1].push(["description", {}, "text", event.description]);
   }
@@ -242,21 +281,20 @@ export function calendarEventToJCal(
     ]);
   });
 
-  const timezoneData = TIMEZONES.zones[event.timezone];
+  if (event.exdates && event.exdates.length > 0) {
-  if (!timezoneData) {
+    event.exdates.forEach((ex) => {
-    const vtimezone = new ICAL.Timezone({
+      vevent[1].push([
-      component: TIMEZONES.zones["Etc/UTC"].ics,
+        "exdate",
-      tzid: "Etc/UTC",
+        { tzid },
+        "date-time",
+        formatDateToICal(new Date(ex), false),
+      ]);
     });
-    return ["vcalendar", [], [vevent, vtimezone.component.jCal]];
   }
 
-  const vtimezone = new ICAL.Timezone({
+  return vevent;
-    component: timezoneData.ics,
-    tzid: event.timezone,
-  });
-  return ["vcalendar", [], [vevent, vtimezone.component.jCal]];
 }
+
 function formatDateToICal(date: Date, allday: Boolean) {
   // Format date like: 2025-02-14T11:00:00 (local time)