From 3e96034b922af912e8e17862452ef6c1dc585cf3 Mon Sep 17 00:00:00 2001
From: lenhanphung <lenhanphung@gmail.com>
Date: Mon, 22 Sep 2025 10:25:47 +0700
Subject: [PATCH] style: Split custom main calendar css

---
 src/components/Calendar/Calendar.css       | 109 ---------------------
 src/components/Calendar/Calendar.tsx       |   3 +-
 src/components/Calendar/CustomCalendar.css | 108 ++++++++++++++++++++
 3 files changed, 110 insertions(+), 110 deletions(-)
 create mode 100644 src/components/Calendar/CustomCalendar.css

diff --git a/src/components/Calendar/Calendar.css b/src/components/Calendar/Calendar.css
index 41233fd..eed1f96 100644
--- a/src/components/Calendar/Calendar.css
+++ b/src/components/Calendar/Calendar.css
@@ -166,112 +166,3 @@
   margin-left: auto;
   margin-right: auto;
 }
-
-/* Custom main calendar view */
-.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr {
-  /* display: none; */
-}
-.fc-theme-standard td,
-.fc-theme-standard th {
-  border: 1px solid #b8c1cc;
-  border-left: 0;
-}
-a.fc-timegrid-axis-cushion {
-  color: #243b55;
-  text-align: center;
-  font-family: Roboto;
-  font-size: 12.507px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 18.76px;
-  letter-spacing: 0.391px;
-}
-.fc-daygrid-day-top small {
-  color: #8c9caf;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px;
-  letter-spacing: 0.25px;
-}
-.fc-daygrid-day-top .fc-daygrid-day-number,
-span.fc-daygrid-day-number {
-  color: #243b55;
-  margin: 0 8px 0 0;
-  font-family: Roboto;
-  font-size: 28px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 36px;
-  position: relative;
-  width: 48px;
-  height: 48px;
-  line-height: 39px;
-}
-.fc-daygrid-day-top .fc-daygrid-day-number:after,
-span.fc-daygrid-day-number:after {
-  content: "";
-  z-index: -1;
-  border-radius: 50%;
-  width: 48px;
-  height: 48px;
-  position: absolute;
-  left: 0;
-  top: -1px;
-}
-span.fc-daygrid-day-number.current-date {
-  color: #fff;
-}
-span.fc-daygrid-day-number.current-date:after {
-  background-color: #f67e35;
-}
-td.fc-timegrid-slot.fc-timegrid-slot-label.fc-scrollgrid-shrink,
-td.fc-timegrid-slot.fc-timegrid-slot-label.fc-timegrid-slot-minor {
-  border: 0;
-}
-th.fc-timegrid-axis.fc-scrollgrid-shrink {
-  border: 0;
-  border-right: 1px solid #b8c1cc;
-}
-.fc .fc-timegrid-axis-cushion {
-  min-width: 70px;
-  max-width: 70px;
-  padding: 0;
-  text-align: left;
-}
-.fc .fc-timegrid-divider {
-  display: none;
-  height: 0;
-}
-.fc-timegrid-slot-label-cushion {
-  color: #aea9b1;
-  font-family: Roboto;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-  letter-spacing: 0.25px;
-}
-th.fc-col-header-cell.fc-day {
-  border-right: 0;
-}
-.fc .fc-scrollgrid {
-  border: 0;
-}
-.fc .fc-timegrid-slot-label {
-  justify-content: flex-end;
-}
-.fc .fc-timegrid-slot-label .fc-timegrid-slot-label-frame {
-  position: relative;
-  transform: translate(-15px, -12px);
-}
-.fc .fc-timegrid-slot-label .fc-timegrid-slot-label-frame::after {
-  content: "";
-  z-index: -1;
-  background-color: #b8c1cc;
-  width: 10px;
-  height: 1px;
-  position: absolute;
-  top: 9.5px;
-  right: -15px;
-}
diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
index e06f9d3..5ec75ee 100644
--- a/src/components/Calendar/Calendar.tsx
+++ b/src/components/Calendar/Calendar.tsx
@@ -6,7 +6,8 @@ import interactionPlugin from "@fullcalendar/interaction";
 import { CalendarApi, DateSelectArg } from "@fullcalendar/core";
 import ReactCalendar from "react-calendar";
 import "./Calendar.css";
-import { useEffect, useMemo, useRef, useState } from "react";
+import "./CustomCalendar.css";
+import { useEffect, useRef, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import EventPopover from "../../features/Events/EventModal";
 import CalendarPopover from "../../features/Calendars/CalendarModal";
diff --git a/src/components/Calendar/CustomCalendar.css b/src/components/Calendar/CustomCalendar.css
new file mode 100644
index 0000000..d892e1c
--- /dev/null
+++ b/src/components/Calendar/CustomCalendar.css
@@ -0,0 +1,108 @@
+/* Custom main calendar view */
+.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr {
+  /* display: none; */
+}
+.fc-theme-standard td,
+.fc-theme-standard th {
+  border: 1px solid #b8c1cc;
+  border-left: 0;
+}
+a.fc-timegrid-axis-cushion {
+  color: #243b55;
+  text-align: center;
+  font-family: Roboto;
+  font-size: 12.507px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18.76px;
+  letter-spacing: 0.391px;
+}
+.fc-daygrid-day-top small {
+  color: #8c9caf;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+}
+.fc-daygrid-day-top .fc-daygrid-day-number,
+span.fc-daygrid-day-number {
+  color: #243b55;
+  margin: 0 8px 0 0;
+  font-family: Roboto;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 36px;
+  position: relative;
+  width: 48px;
+  height: 48px;
+  line-height: 39px;
+}
+.fc-daygrid-day-top .fc-daygrid-day-number:after,
+span.fc-daygrid-day-number:after {
+  content: "";
+  z-index: -1;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: 0;
+  top: -1px;
+}
+span.fc-daygrid-day-number.current-date {
+  color: #fff;
+}
+span.fc-daygrid-day-number.current-date:after {
+  background-color: #f67e35;
+}
+td.fc-timegrid-slot.fc-timegrid-slot-label.fc-scrollgrid-shrink,
+td.fc-timegrid-slot.fc-timegrid-slot-label.fc-timegrid-slot-minor {
+  border: 0;
+}
+th.fc-timegrid-axis.fc-scrollgrid-shrink {
+  border: 0;
+  border-right: 1px solid #b8c1cc;
+}
+.fc .fc-timegrid-axis-cushion {
+  min-width: 70px;
+  max-width: 70px;
+  padding: 0;
+  text-align: left;
+}
+.fc .fc-timegrid-divider {
+  display: none;
+  height: 0;
+}
+.fc-timegrid-slot-label-cushion {
+  color: #aea9b1;
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+}
+th.fc-col-header-cell.fc-day {
+  border-right: 0;
+}
+.fc .fc-scrollgrid {
+  border: 0;
+}
+.fc .fc-timegrid-slot-label {
+  justify-content: flex-end;
+}
+.fc .fc-timegrid-slot-label .fc-timegrid-slot-label-frame {
+  position: relative;
+  transform: translate(-15px, -12px);
+}
+.fc .fc-timegrid-slot-label .fc-timegrid-slot-label-frame::after {
+  content: "";
+  z-index: -1;
+  background-color: #b8c1cc;
+  width: 10px;
+  height: 1px;
+  position: absolute;
+  top: 9.5px;
+  right: -15px;
+}