task #133 - calendar styling

hack4impact-calpoly · May 26, 2023 · e2781be · e2781be
1 parent 01eb6a0
commit e2781be
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "web-vitals": "^1.1.0"
   },
   "scripts": {
+    "dev": "nodemon index.js",
     "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test",

diff --git a/src/components/pages/schedule/Schedule.jsx b/src/components/pages/schedule/Schedule.jsx
@@ -23,7 +23,7 @@ export default function Schedule(props) {
         title: v.address,
         start: v.startTime,
         end: v.endTime,
-        backgroundColor: "#8FCBD4",
+        backgroundColor: "#108888",
         notes: v.notes,
         id: v.id,
       });

diff --git a/src/components/pages/schedule/calendar/newCalendar.css b/src/components/pages/schedule/calendar/newCalendar.css
@@ -1,19 +1,20 @@
 :root {
-    --fc-event-bg-color: #5DA6B1;
-    --fc-event-border-color: #8FCBD4;
+    --fc-event-bg-color: #43a4b3;
+    --fc-event-border-color: #80979a;
     --fc-event-text-color: #fff;
     --border-color: #4C4640;
 }
 
 #shift-calendar-box {
     display: flex;
     flex-direction: column;
+    align-content: center;
 }
 
 #extended-event-info {
     display: flex;
     flex-direction: column;
-    align-content: space-between;
+    align-content: center;
     justify-content: center;
     flex-wrap: wrap;
 }
@@ -29,6 +30,7 @@
     padding: 1vh;
     font-size: large;
     color: var(--fc-event-bg-color);
+    align-items: center;
 }
 
 #extended-info-container {
@@ -45,9 +47,9 @@
 
 #shift-calendar-box {
     display: flex;
-    flex-direction: row; 
+    flex-direction: column; 
     min-height: 100%;
-    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
+    font-family: sans-serif;
     font-size: 14px;
     margin: 1em 1em 1em 1em ;
 }
@@ -57,14 +59,17 @@
 }
 
 #shift-calendar {
+    font-family: sans-serif;
     width: 80%;
     padding: 3em 2em 3em 3em;
+    align-content: center;
 }
 
 .fc { /* the calendar root */
     max-width: 1100px;
     margin: 0 auto;
     font-size: 12px;
+    font-family: sans-serif;
 }
 
 h2 {

diff --git a/src/components/pages/schedule/calendar/newCalendar.jsx b/src/components/pages/schedule/calendar/newCalendar.jsx
@@ -77,6 +77,7 @@ export default function NewCalendar() {
   const expandedCalendar = (
     <FullCalendar
       id="expanded-shift-calendar"
+      className=".fc-agendaWeek-view"
       plugins={[timeGridPlugin, interactionPlugin]}
       headerToolbar={{
         left: "prev,next today",
@@ -92,6 +93,7 @@ export default function NewCalendar() {
       displayEventEnd
       eventMouseEnter={(info) => handleMouseEnter(info)}
       eventMouseLeave={(info) => handleMouseLeave(info)}
+      allDaySlot={false}
     />
   );