center calendar on page, change event color, change dropdown style

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>
   );
 };