[1] events are properly displayed by calendars

src/components/Calendar/Calendar.tsx

@@ -10,15 +10,20 @@ import { useRef, useState } from "react";
 import { useAppSelector } from "../../app/hooks";
 import EventPopover from "../../features/Events/EventModal";
 import CalendarPopover from "../../features/Calendars/CalendarModal";
+import { CalendarEvent } from "../../features/Events/EventsTypes";
 
 export default function CalendarApp() {
   const calendarRef = useRef<CalendarApi | null>(null);
   const [selectedDate, setSelectedDate] = useState(new Date());
   const calendars = useAppSelector((state) => state.calendars);
   const [selectedCalendars, setSelectedCalendars] = useState(
-    Object.keys(calendars).map((id) => calendars[id].name)
+    Object.keys(calendars).map((id) => id)
   );
-  const events = useAppSelector((state) => state.events);
+  
+  let filteredEvents: CalendarEvent[] = [];
+  selectedCalendars.forEach((id) => {
+    filteredEvents = filteredEvents.concat(calendars[id].events);
+  });
 
   const handleCalendarToggle = (name: string) => {
     setSelectedCalendars((prev) =>
@@ -103,9 +108,9 @@ export default function CalendarApp() {
             <label>
               <input
                 type="checkbox"
-                style={{backgroundColor:calendars[id].color}}
+                style={{ backgroundColor: calendars[id].color }}
-                checked={selectedCalendars.includes(calendars[id].name)}
+                checked={selectedCalendars.includes(id)}
-                onChange={() => handleCalendarToggle(calendars[id].name)}
+                onChange={() => handleCalendarToggle(id)}
               />
               {calendars[id].name}
             </label>
@@ -132,7 +137,7 @@ export default function CalendarApp() {
             timeGridWeek: { titleFormat: { month: "long", year: "numeric" } },
           }}
           dayMaxEvents={true}
-          events={events}
+          events={filteredEvents}
           weekNumbers
           weekNumberFormat={{ week: "long" }}
           slotDuration={"00:30:00"}

src/features/Calendars/CalendarSlice.ts

@@ -18,6 +18,10 @@ const CalendarSlice = createSlice({
       state,
       action: PayloadAction<{ calendarUid: string; event: CalendarEvent }>
     ) => {
+      console.log(action.payload)
+      if (!state[action.payload.calendarUid].events) {
+        state[action.payload.calendarUid].events = [];
+      }
       state[action.payload.calendarUid].events.push(action.payload.event);
     },
     removeEvent: (

src/features/Events/EventModal.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { addEvent } from "./EventsSlice";
+import { addEvent } from "../Calendars/CalendarSlice";
 import { CalendarEvent } from "./EventsTypes";
 import { DateSelectArg } from "@fullcalendar/core";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
@@ -11,6 +11,7 @@ import {
   Typography,
   Select,
   MenuItem,
+  SelectChangeEvent,
 } from "@mui/material";
 
 function EventPopover({
@@ -22,13 +23,13 @@ function EventPopover({
   anchorEl: HTMLElement | null;
   open: boolean;
   onClose: (event: {}, reason: "backdropClick" | "escapeKeyDown") => void;
-  selectedRange: any;
+  selectedRange: DateSelectArg | null;
 }) {
   const dispatch = useAppDispatch();
 
   const organizer = useAppSelector((state) => state.user.organiserData);
   const calendars = useAppSelector((state) => state.calendars);
-  const [summary, setSummary] = useState("");
+  const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [location, setLocation] = useState("");
   const [start, setStart] = useState("");
@@ -44,9 +45,9 @@ function EventPopover({
 
   const handleSave = () => {
     const newEvent: CalendarEvent = {
-      summary,
+      title,
-      start: new Date(start),
+      start: new Date(start || ""),
-      end: new Date(end),
+      end: new Date(end || ""),
       uid: Date.now().toString(36),
       description,
       location,
@@ -62,13 +63,13 @@ function EventPopover({
         },
       ],
       transp: "OPAQUE",
+      color: calendars[calendarid].color,
     };
-    dispatch(addEvent(newEvent));
+    dispatch(addEvent({ calendarUid: calendarid, event: newEvent }));
-    console.log(newEvent);
     onClose({}, "backdropClick");
 
     // Reset
-    setSummary("");
+    setTitle("");
     setDescription("");
     setLocation("");
   };
@@ -91,16 +92,18 @@ function EventPopover({
         <Typography variant="h6" gutterBottom>
           Create Event
         </Typography>
-        <Select onClick={(e) => console.log(e.target)}>
+        <Select
+          onChange={(e: SelectChangeEvent) => setCalendarid(e.target.value)}
+        >
           {Object.keys(calendars).map((calendar) => (
             <MenuItem value={calendar}>{calendars[calendar].name}</MenuItem>
           ))}
         </Select>
         <TextField
           fullWidth
-          label="summary"
+          label="title"
-          value={summary}
+          value={title}
-          onChange={(e) => setSummary(e.target.value)}
+          onChange={(e) => setTitle(e.target.value)}
           size="small"
           margin="dense"
         />

src/features/Events/EventsTypes.ts

@@ -7,11 +7,12 @@ export interface CalendarEvent {
   end?: Date;
   class?: string;
   x_openpass_videoconference?: unknown;
-  summary?: string;
+  title?: string;
   description?: string;
   location?: string;
   organizer: userOrganiser;
   attendee: userAttendee[];
   stamp?: Date;
   sequence?: Number;
+  color?: string;
 }