calender size formatted

src/components/Calendar/CalendarTable.jsx

@@ -34,7 +34,7 @@ export default function CalendarTable({ className }) {
 
 
       <div>
-      <Calendar onChange={onChange} value={value} />
+      <Calendar onChange={onChange} value={value} calendarType="US" />
     </div>
 
 

src/index.css

@@ -670,3 +670,38 @@ TODO: Responsive ===========================
     @apply mb-2;
   }
 }
+
+/* Calendar */
+.react-calendar{
+  width: 100%;
+  min-height: 23.2rem;
+  border-radius: 7px !important;
+}
+
+.react-calendar__navigation{
+  margin-top: 2px;
+  margin-inline: 2px;
+}
+
+.react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus{
+  @apply rounded-full transition duration-500
+}
+
+.react-calendar__month-view__days{
+  display: grid !important;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.react-calendar__month-view__weekdays__weekday abbr:where([title]){
+  text-decoration: none !important;
+  cursor: default;
+}
+
+.react-calendar__tile{
+  border: 1px solid #cfd7e3 !important;
+  border-left: 0;
+  text-align: right;
+  height: 4.813rem !important;
+  transition: all 500ms;
+}