started calendar styling

src/component/calendar/Calendar.jsx

@@ -39,8 +39,8 @@ export default function Calendar(){
                                         <p className="mt-3">
                                             Drag and drop your event or click in the calendar.
                                         </p>
-                                        {dummyEvents.map(item => (
+                                        {dummyEvents.map((item, index) => (
-                                            <div className={`fc-event ${item.color}`} data-color={`${item.color}`} 
+                                            <div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`} 
                                                 // draggable="true"
                                                 onDragStart={() =>
                                                 handleDragStart({ title: formatName(item.name)})

src/css/style.scss

@@ -83,7 +83,13 @@
 @import "pages/employees";
 @import "pages/coming-soon";
 
+
 // THIS IMPORTS ARE FOR THE CALENDAR PACKAGE - PLEASE DO NOT REMOVE
+$today-highlight-bg: #fcf8e3;
+// $btn-color: #fff;
+$btn-bg: #8e54e9;
+$btn-border: #8e54e9;
+
 @import 'react-big-calendar/lib/sass/styles';
 @import 'react-big-calendar/lib/addons/dragAndDrop/styles'; // if using DnD
 
@@ -112,3 +118,33 @@
   background-color: #fcfaf1;
   border-radius: 10px;
 }
+
+
+/* CALENDER STYLE HERE */
+// .rbc-today{
+//   background-color: '#fcf8e3' !important;
+// }
+.rbc-toolbar button {
+  background: #eceef3;
+  border: none;
+  color: #a6a9b7 !important;
+  text-transform: capitalize;
+  box-shadow: none!important;
+  text-shadow: none!important;
+  border-radius: 3px!important;
+  margin: 0 3px!important;
+  padding: 6px 12px!important;
+  height: auto!important;
+}
+.rbc-toolbar-label{
+  color: black !important;
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+// .rbc-month-view{
+//   border: .5px solid #e8edf1!important;
+// }
+.rbc-toolbar button.rbc-active, .rbc-toolbar button:active, .rbc-toolbar button:hover{
+  color: #fff!important;
+}
+/* END OF CALENDER STYLE */