Toggle navigation
Toggle navigation
This project
Loading...
Sign in
HyeonJun Jeon
/
Extended-Calendar
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
HyeonJun Jeon
2022-06-10 06:25:59 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
d1e6d22111334c5371a72e98fbc4b44694ce6eed
d1e6d221
1 parent
cb07b82b
[Style] Combine .css
Show whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
46 additions
and
61 deletions
src/components/GridItem.js
src/components/Header.js
src/components/Month.js
src/components/ScheduleItem.js
src/components/Week.js
src/pages/Calendar.js
src/styles/Month.css → src/styles/Calendar.css
src/styles/Week.css
src/components/GridItem.js
View file @
d1e6d22
...
...
@@ -98,6 +98,7 @@ const GridItem = ({ targetDate }) => {
className
=
"GridItem gi"
relative
=
{
month
-
calMonth
||
null
}
onClick
=
{
click
}
scope
=
{
calState
.
scope
}
>
<
span
className
=
"date gi"
>
{
calMonth
!==
month
?
month
+
"/"
+
date
:
date
}
...
...
src/components/Header.js
View file @
d1e6d22
...
...
@@ -3,7 +3,6 @@ import { useContext } from "react";
import
{
useNavigate
}
from
"react-router-dom"
;
import
{
CalendarStateContext
}
from
"../pages/Calendar"
;
import
"../styles/Header.css"
;
import
{
moveDate
,
toYMD
}
from
"../utils/Dates"
;
const
Header
=
()
=>
{
...
...
src/components/Month.js
View file @
d1e6d22
...
...
@@ -3,7 +3,6 @@ import GridItem from "./GridItem.js";
import
{
CalendarStateContext
}
from
"../pages/Calendar"
;
import
{
moveDate
,
toSunday
}
from
"../utils/Dates"
;
import
"../styles/Month.css"
;
const
GridHead
=
()
=>
{
const
days
=
[
"일"
,
"월"
,
"화"
,
"수"
,
"목"
,
"금"
,
"토"
];
...
...
src/components/ScheduleItem.js
View file @
d1e6d22
import
{
useRef
}
from
"react"
;
import
{
use
Context
,
use
Ref
}
from
"react"
;
import
zoomSymbol
from
"../assets/zoom.png"
;
import
ecampusSymbol
from
"../assets/e-Campus.png"
;
import
{
CalendarStateContext
}
from
"pages/Calendar"
;
const
ScheduleItem
=
({
schedule
,
finish
})
=>
{
const
{
state
:
calState
}
=
useContext
(
CalendarStateContext
);
const
{
name
:
subjectName
,
nickname
:
subjectNickname
,
...
...
@@ -19,6 +21,8 @@ const ScheduleItem = ({ schedule, finish }) => {
}
=
schedule
;
let
sTime
=
startTime
?
startTime
.
substring
(
0
,
5
)
:
""
;
//HHMM
let
eTime
=
endTime
?
endTime
.
substring
(
0
,
5
)
:
""
;
const
subStr
=
calState
.
scope
!==
"month"
?
`
${
subjectNickname
||
subjectName
}
`
:
null
;
const
selectSymbol
=
()
=>
{
let
symbol
;
...
...
@@ -57,6 +61,11 @@ const ScheduleItem = ({ schedule, finish }) => {
onClick
=
{
click
}
ref
=
{
thisRef
}
>
{
subStr
&&
(
<
span
className
=
"s_substr ss"
>
{
subStr
}
<
br
/>
<
/span
>
)}
<
img
className
=
"s_symbol ss"
src
=
{
selectSymbol
()}
alt
=
"404"
/>
{
startTime
&&
<
span
className
=
"s_start ss"
>
{
sTime
}
<
/span>
}
{
endTime
&&
<
span
className
=
"s_end ss"
>
{
eTime
}
<
/span>
}
...
...
src/components/Week.js
View file @
d1e6d22
...
...
@@ -3,7 +3,6 @@ import GridItem from "./GridItem.js";
import
{
CalendarStateContext
}
from
"../pages/Calendar"
;
import
{
moveDate
,
toSunday
}
from
"../utils/Dates"
;
import
"../styles/Week.css"
;
const
GridHead
=
()
=>
{
const
days
=
[
"일"
,
"월"
,
"화"
,
"수"
,
"목"
,
"금"
,
"토"
];
...
...
src/pages/Calendar.js
View file @
d1e6d22
import
React
,
{
useEffect
,
useReducer
,
useState
}
from
"react"
;
import
{
useNavigate
,
Route
,
Routes
}
from
"react-router-dom"
;
import
localforage
from
"localforage"
;
import
axios
from
"axios"
;
import
Month
from
"../components/Month"
;
import
Header
from
"../components/Header"
;
import
Side
from
"../components/Side"
;
import
localforage
from
"localforage"
;
import
axios
from
"axios"
;
import
Week
from
"../components/Week"
;
import
Day
from
"components/Day"
;
import
"../styles/Calendar.css"
;
import
"../styles/Header.css"
;
export
const
CalendarStateContext
=
React
.
createContext
();
...
...
@@ -80,7 +83,7 @@ const Calendar = () => {
<
Routes
>
<
Route
path
=
"/month/*"
element
=
{
<
Month
/>
}
/
>
<
Route
path
=
"/week/*"
element
=
{
<
Week
/>
}
/
>
<
Route
path
=
"/day/*"
element
=
{
<
><
/>} /
>
<
Route
path
=
"/day/*"
element
=
{
<
Day
/>
}
/
>
<
/Routes
>
<
/div
>
<
/div
>
...
...
src/styles/
Month
.css
→
src/styles/
Calendar
.css
View file @
d1e6d22
.Month
{
.Month
,
.Week
{
display
:
flex
;
flex-direction
:
column
;
flex-grow
:
1
;
}
.Grid
{
display
:
grid
;
grid-template-columns
:
1
fr
1
fr
1
fr
1
fr
1
fr
1
fr
1
fr
;
overflow-y
:
scroll
;
height
:
calc
(
100vh
-
115px
);
border
:
solid
thin
gray
;
}
.Row
{
display
:
flex
;
overflow-y
:
scroll
;
height
:
calc
(
100vh
-
115px
);
border
:
solid
thin
gray
;
}
.Day
{
display
:
flex
;
flex-direction
:
column
;
flex-grow
:
1
;
overflow-y
:
scroll
;
height
:
calc
(
100vh
-
80px
);
border
:
solid
thin
gray
;
margin-top
:
5px
;
}
/* Common */
.GridItem
,
.GridHeadItem
{
flex-basis
:
100px
;
...
...
@@ -33,14 +61,6 @@
margin-right
:
16.8px
;
}
.Grid
{
display
:
grid
;
grid-template-columns
:
1
fr
1
fr
1
fr
1
fr
1
fr
1
fr
1
fr
;
overflow-y
:
scroll
;
height
:
calc
(
100vh
-
115px
);
border
:
solid
thin
gray
;
}
.GridItem
[
relative
]
>
span
{
color
:
gray
;
}
...
...
src/styles/Week.css
deleted
100644 → 0
View file @
cb07b82
.Week
{
display
:
flex
;
flex-direction
:
column
;
flex-grow
:
1
;
}
.GridItem
,
.GridHeadItem
{
flex-basis
:
100px
;
flex-grow
:
1
;
}
.GridItem
{
border
:
solid
thin
lightgray
;
display
:
flex
;
flex-direction
:
column
;
/* height: 150px; */
padding
:
5px
;
}
.GridHeadItem
{
height
:
20px
;
text-align
:
center
;
line-height
:
20px
;
padding
:
10px
5px
10px
5px
;
}
.GridHead
{
display
:
flex
;
}
.GridHead
{
margin-right
:
16.8px
;
}
.Row
{
display
:
flex
;
overflow-y
:
scroll
;
height
:
calc
(
100vh
-
115px
);
border
:
solid
thin
gray
;
}
.GridItem
[
relative
]
>
span
{
color
:
gray
;
}
Please
register
or
login
to post a comment