From 35b0b528cd2add2dacd2cc510a3052213654d5ee Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Sat, 26 Mar 2022 17:33:59 -0700
Subject: [PATCH] center calendar on page, change event color, change dropdown
 style

---
 src/components/calendar/CalendarPage.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/calendar/CalendarPage.tsx b/src/components/calendar/CalendarPage.tsx
index 4e78494..0929819 100644
--- a/src/components/calendar/CalendarPage.tsx
+++ b/src/components/calendar/CalendarPage.tsx
@@ -3,6 +3,7 @@ import moment from "moment";
 
 import "react-big-calendar/lib/css/react-big-calendar.css";
 import {
+  Box,
   Divider,
   FormControl,
   InputLabel,
@@ -107,10 +108,17 @@ const CalendarPage: React.FC = () => {
   };
 
   return (
-    <>
+    <Box sx={{ 
+      display: "flex", 
+      flexDirection: "column", 
+      width: "98.5%", 
+      height: "99.5%", 
+      ml: 1,
+      mt: 1}}>
+
       <Toolbar />
 
-      <FormControl variant="filled" fullWidth>
+      <FormControl fullWidth>
         <InputLabel id="calendar-user-select-label">
           <Typography color="black">User</Typography>
         </InputLabel>
@@ -142,14 +150,20 @@ const CalendarPage: React.FC = () => {
       <Calendar
         events={getUserMeetings(selectedUserUuid)}
         views={["month", "week", "day"]}
-        defaultView={Views.WEEK}
+        defaultView={Views.MONTH}
         onSelectEvent={handleSelectEvent}
         step={60}
         showMultiDayTimes
         localizer={momentLocalizer(moment)}
         style={{ height: "83%" }}
+        eventPropGetter = {() => {
+          const backgroundColor = "IndianRed";
+          const borderColor = "White";
+          return { style: { backgroundColor, borderColor } };
+        }}
       />
-    </>
+
+    </Box>
   );
 };