edited style for calendar event block

scottylabs-labrador · Dec 23, 2024 · b1b1bbb · b1b1bbb
1 parent 546ae53
commit b1b1bbb
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 6 deletions.
diff --git a/frontend/src/components/calendar/Calendar.tsx b/frontend/src/components/calendar/Calendar.tsx
@@ -1,4 +1,4 @@
-import React, { RefObject, useRef, useState } from "react";
+import React, { RefObject, useEffect, useRef, useState } from "react";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
@@ -16,10 +16,25 @@ import { RemoveFCEventType } from "../../types";
 
 function renderEventContent(eventContent: EventContentArg) {
     return (
-      <div className={`w-full ${eventContent.event.allDay ? 'bg-green': 'bg-green'}`}>
+      // <div className={`w-full ${eventContent.event.allDay ? 'bg-green': 'bg-green'}`}>
 
-        <p className="w-full truncate ..."><b>{eventContent.timeText}</b> {eventContent.event.title}</p>
-      </div>
+      //   <p className="w-full truncate ..."><b>{eventContent.timeText}</b> {eventContent.event.title}</p>
+      // </div>
+
+    <div className={`w-full bg-white border-solid border-2 border-green rounded-md p-1`}>
+      <p className="w-full text-black truncate ...">{eventContent.event.title}</p>
+      {/* <div
+        style={{
+          position: "absolute",
+          bottom: "8px",
+          right: "8px",
+          fontSize: "1.2em",
+          color: "#6FBF73",
+        }}
+      >
+        ✔️
+      </div> */}
+    </div>
     )
   }
 
@@ -38,9 +53,24 @@ export default function Calendar({showSearchBar, events, calendarRef, handleRemo
     const [currentEvents, setCurrentEvents] = useState<EventApi[]>();
     const [currView, setCurrView] = useState<string>('dayGridMonth');
     const [showGCal, setShowGCal] = useState<boolean>(false);
-
+    const [eventsWStyle, setEventsWStyle] = useState({});
     // console.log(events);
 
+    // useEffect(()=> {
+    //   updateState();
+    // },[events])
+
+    // const updateState = () => {
+    //   const newJsonObject = {
+    //     events: events,
+    //     color: 'white',
+    //     textColor: 'black'
+    //   };
+    //   console.log(newJsonObject);
+    //   setEventsWStyle(()=> newJsonObject);
+    // }
+
+
     const handleDropdown = (event: SelectChangeEvent<string>) => {
         const {target: { value }} = event;
         setCurrView(value);

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -27,7 +27,9 @@ const Home: React.FC = () => {
             start: start,
             end: end,
             allDay: allDay,
-            searchCardId: searchCardId
+            searchCardId: searchCardId,
+            backgroundColor: 'white',
+            borderColor: 'transparent',
         }];
         setEvents(newEvents);
     }