Merge pull request #153 from hack4impact-calpoly/141CalendarStyling

task #141 - calendar styling
hack4impact-calpoly · Jun 1, 2023 · 786dde7 · 786dde7
2 parents 542090d + 9a25c46
commit 786dde7
Show file tree

Hide file tree

Showing 3 changed files with 15 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/calendar/newCalendar.css b/src/components/pages/schedule/calendar/newCalendar.css
@@ -1,20 +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;
-    padding-left:100px;
+    /* padding-left: 100px; */
 }
 
 #extended-event-info {
     display: flex;
     flex-direction: column;
-    align-content: space-between;
+    align-content: center;
     justify-content: center;
     flex-wrap: wrap;
 }
@@ -30,6 +30,7 @@
     padding: 1vh;
     font-size: large;
     color: var(--fc-event-bg-color);
+    align-items: center;
 }
 
 #extended-info-container {
@@ -46,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 ;
 }
@@ -59,13 +60,16 @@
 
 #shift-calendar {
     width: 95%;
+    font-family: sans-serif;
     padding: 3em 2em 3em 3em;
+    align-self: 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
@@ -171,6 +171,8 @@ export default function NewCalendar() {
 
   const expandedCalendar = (
     <FullCalendar
+      id="expanded-shift-calendar"
+      className=".fc-agendaWeek-view"
       plugins={[timeGridPlugin, interactionPlugin]}
       headerToolbar={{
         left: "prev,next today",
@@ -184,6 +186,7 @@ export default function NewCalendar() {
       events={eventData}
       eventMaxStack={2}
       displayEventEnd
+      allDaySlot={false}
       select={(info) => handleSelection(info)}
       eventClick={(info) => handleClick(info)}
       // eventMouseEnter={(info) => handleMouseEnter(info)}
@@ -207,6 +210,7 @@ export default function NewCalendar() {
       events={eventData}
       eventMaxStack={3}
       displayEventEnd
+      allDaySlot={false}
       select={(info) => handleSelection(info)}
       eventClick={(info) => handleClick(info)}
     />