added event block styles

scottylabs-labrador · Feb 1, 2025 · f9f65ac · f9f65ac
1 parent bda0217
commit f9f65ac
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 11 deletions.
diff --git a/frontend/src/components/calendar/Calendar.tsx b/frontend/src/components/calendar/Calendar.tsx
@@ -20,7 +20,8 @@ function renderEventContent(eventContent: EventContentArg) {
     return (
       <div className={`w-full`}> 
       {/* ${eventContent.event.allDay ? 'bg-green': 'bg-green'} */}
-        <p className="w-full truncate ..."><b>{eventContent.timeText}</b> {eventContent.event.title}</p>
+        <p className="custom-event-text w-full truncate ...">{eventContent.event.title}</p>
+        <p className="custom-event-text w-full ">{eventContent.timeText}</p>
       </div>
     )
   }
@@ -51,7 +52,7 @@ export default function Calendar({showSearchBar, events, setEvents, calendarRef,
       if (button) {
         button.setAttribute(
           "style",
-          `background-color: ${showGCal ? "#1F4C4C" : "#182C4B"};
+          `background-color: ${showGCal ? "#425575" : "#182C4B"};
           color: white;
           border: none;
           `
@@ -76,6 +77,7 @@ export default function Calendar({showSearchBar, events, setEvents, calendarRef,
               end: event.end.dateTime || event.end.date,
               classNames: ["gcal-event"], // Add a custom class for styling
             }));
+            console.log("hi\n",formattedGCalEvents);
             setEvents((prev) => [...prev, ...formattedGCalEvents]);
           }
         } catch (error) {

diff --git a/frontend/src/components/calendar/index.css b/frontend/src/components/calendar/index.css
@@ -6,29 +6,62 @@
 }
 
 /* event blocks */
-.fc-event.gcal-event {
+/* .fc-event.gcal-event {
   border: 2px solid #182C4B !important;
-  /* background-color: white !important; */
-  /* color: #182C4B !important; */
+  background-color: white !important;
+  color: #182C4B !important;
 }
 
 .fc-event.cmu-cal-event {
   border: 3px solid #719F94 !important;
-  /* background-color: white !important; */
+  background-color: white !important;
   color: white !important;
+} */
+
+
+/* Full Day Events */
+.fc-event.fc-daygrid-event { /* full-day events, where allDay:true in events */
+  background-color: #182C4B; 
+  color: white;
+  padding-left: 4px;
 }
 
+.fc-event.gcal-event.fc-daygrid-event { /* full-day gcal events */
+  background-color: #425575;
+}
 
+.fc-event.fc-daygrid-event.cmu-cal-event { /* full-day cmu-cal events */
+  background-color: #719F94;
+}
 
-.fc-event.gcal-event.fc-daygrid-event { /* full-day events, where allDay:true in events */
-  background-color: #182C4B !important; 
+/* Hour Specific Event Blocks */
+.fc-event.fc-timegrid-event { /* hour-specific events */
+  background-color: transparent;
 }
 
-.fc-event.gcal-event.fc-timegrid-event { /* hour-specific events */
-  border: 2px solid #182C4B !important;
+.fc-event.fc-timegrid-event.gcal-event { /* hour-specific gcal events */
+  border: 2px solid #425575;
+}
+
+.fc-event.fc-timegrid-event.cmu-cal-event { /* hour-specific cmucal events */
+  border: 2px solid #719F94;
 }
 
-.fc-dayGridMonth {
+/* Hour Specific Event Block Text */
+.fc-timegrid-event .custom-event-text { /* hour-specific event text */
+  color: black;
+}
+
+.fc-timegrid-event.gcal-event .custom-event-text { /* gcal event text */
+  color: #54698c;
+}
+
+.fc-timegrid-event.cmu-cal-event .custom-event-text { /* cmucal event text */
+  color: #719F94;
+}
+
+
+.fc-dayGridMonth.fc-event { /* full-day events in month view */
 
 }