eduvia/workavia-calendar-front
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Split custom main calendar css

Browse Source
This commit is contained in:
lenhanphung
2025-09-22 10:25:47 +07:00
parent 20a31ea8e0
commit 3e96034b92
3 changed files with 110 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Calendar/Calendar.css
-109
View File
@@ -166,112 +166,3 @@
margin-left: auto; margin-left: auto;
margin-right: 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;
}
src/components/Calendar/Calendar.tsx
+2 -1
View File
@@ -6,7 +6,8 @@ import interactionPlugin from "@fullcalendar/interaction";
import { CalendarApi, DateSelectArg } from "@fullcalendar/core"; import { CalendarApi, DateSelectArg } from "@fullcalendar/core";
import ReactCalendar from "react-calendar"; import ReactCalendar from "react-calendar";
import "./Calendar.css"; 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 { useAppDispatch, useAppSelector } from "../../app/hooks";
import EventPopover from "../../features/Events/EventModal"; import EventPopover from "../../features/Events/EventModal";
import CalendarPopover from "../../features/Calendars/CalendarModal"; import CalendarPopover from "../../features/Calendars/CalendarModal";
src/components/Calendar/CustomCalendar.css
+108
View File
@@ -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;
}