finished styling

code100x · Aug 9, 2024 · 6b6c876 · 6b6c876
1 parent d170585
commit 6b6c876
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -166,9 +166,20 @@ width of the controls on screens smaller than 512px */
   z-index: 1;
 }
 
-.rbc-event,
-.rbc-background-event {
-  z-index: 2;
-  padding: 0px !important;
-  border: none !important;
+.rbc-event {
+  min-width: auto;
+}
+
+.rbc-month-content {
+  border-radius: 20px;
+}
+
+.rbc-event-label {
+  display: none;
+}
+
+.rbc-event-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
@@ -40,6 +40,15 @@ const MyCalendar = ({
     [setDate],
   );
 
+  const calendarStyle = () => {
+    return {
+      style: {
+        backgroundColor: 'white',
+        color: 'black',
+      },
+    };
+  };
+
   const handleOnChangeView = (selectedView: View) => {
     setView(selectedView);
   };
@@ -53,10 +62,11 @@ const MyCalendar = ({
         events={events}
         view={view}
         defaultView={Views.MONTH}
-        views={['month', 'week', 'day', 'agenda']}
+        views={['month', 'week', 'day']}
         showMultiDayTimes
         style={{ height: 500 }}
         onView={handleOnChangeView}
+        dayPropGetter={calendarStyle}
       />
     </div>
   );